Crear un botón circular en BS3

(No probado entre navegadores), pero esta es mi respuesta:

.btn-circle {
  width: 40px;
  height: 40px;
  line-height: 40px; /* adjust line height to align vertically*/
  padding:0;
  border-radius: 50%;
}

• centro vertical mediante la propiedad line-height
• el relleno se vuelve inútil y debe restablecerse
• radio de borde independiente del tamaño del botón

Boostrap 3 tiene un componente exactamente para esto. Es:

<span class="badge">100</span>

Esta es la mejor referencia usando font-awesome.

Http://bootsnipp.com/snippets/featured/circle-button ?

CSS:

    .btn-circle { width: 30px; height: 30px; text-align: center;padding: 6px 0;font-size: 12px;line-height: 1.428571429;border-radius: 15px;}.btn-circle.btn-lg {width: 50px;height: 50px;padding: 10px 16px;font-size: 18px;line-height:1.33;border-radius: 25px;} 

Con Font Awesome ICONS, usé el siguiente código para producir un botón/imagen redonda con el color de su elección.

<code>

<span class="fa fa-circle fa-lg" style="color:#ff0000;"></span>

</code>

Tuve el mismo problema y se me ocurrió una solución muy simple que funciona para todos los botones (xs, sm, normal y lg) más o menos :

.btn-circle {
    border-radius: 50%;
    padding: 0.1em;
    width:1.8em;
}

La diferencia entre los btn-xs y-sm son solo su relleno. Y esto no está cubierto con este fragmento. Este fragmento calcula los tamaños basándose únicamente en el tamaño de la fuente.

Si ha descargado estos archivos localmente, puede cambiar las siguientes clases en bootstrap-social.css, acaba de agregar border-radius: 50%;

.btn-social-icon.btn-lg{height:45px;width:45px;
   padding-left:0;padding-right:0; border-radius: 50%; }

Y aquí está el HTML

<a class="btn btn-social-icon btn-lg btn-twitter" >
   <i class="fa fa-twitter"></i>
</a>
<a class=" btn btn-social-icon btn-lg btn-facebook">
   <i class="fa fa-facebook sbg-facebook"></i>
</a>
<a class="btn btn-social-icon btn-lg btn-google-plus">
   <i class="fa fa-google-plus"></i>
</a>

Funciona sin problemas para mí.

Utilice iconos apilados font-awesome (alternativa a las insignias de bootstrap). Aquí hay más ejemplos: http://fontawesome.io/examples/

 .no-border {
        border: none;
        background-color: white;
        outline: none;
        cursor: pointer;
    }
.color-no-focus {
        color: grey;
    }
  .hover:hover {
        color: blue;
    }
 .white {
        color: white;
    }

<button type="button" (click)="doSomething()" 
class="hover color-no-focus no-border fa-stack fa-lg">
<i class="color-focus fa fa-circle fa-stack-2x"></i>
<span class="white fa-stack-1x">1</span>
</button>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>