Quiero crear un botón redondeado en BS3 (un círculo perfecto), con un único icono fontawesome(4.0) en el centro.
Hasta ahora, tengo el siguiente código:
HTML:
<a href="#" class="btn btn-default"><i class="fa fa-user"></i></a>
¿Cuál sería el marcado CSS para hacer de este botón un círculo perfecto?
puedes hacer algo como añadir una clase para añadir un radio de borde
HTML:
<a href="#" class="btn btn-default btn-circle"><i class="fa fa-user"></i></a>
CSS:
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.42;
border-radius: 15px;
}
en caso de que desee cambiar la dimensión que necesita para cambiar el tamaño de fuente o el relleno en consecuencia
(No se ha probado en varios 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%;
}
Si ha descargado estos archivos localmente, entonces usted puede cambiar las siguientes clases en bootstrap-social.css, acaba de agregar border-radio: 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>
A mí me funciona sin problemas.