css - font - ¿Cómo puedo hacer un icono pequeño cuando uso bootstrap?

iconos en bootstrap 4

Question

Si quiero minimizar el tamaño del ícono, ¿cómo puedo hacer que el ícono sea pequeño al usar bootstrap?

Esta es la demostración http://jsfiddle.net/AqUBu/

Me gustaría minimizar el tamaño de este icono humano.

<span class=''badge badge-success''><i class=''icon-user icon-white''></i><i class=''icon-user icon-white''></i><i class=''icon-user icon-white''></i></span>

Answer 1

Desde http://getbootstrap.com/css/#small-text

Texto pequeño

Para reducir el énfasis en la línea o los bloques de texto, use la etiqueta <small> para configurar el texto al 85% del tamaño del elemento primario. Los elementos de encabezado reciben su propio font-size de font-size para los elementos <small> anidados.

Alternativamente, puede usar un elemento en línea con .small en lugar de cualquier <small> .

Tratar:

<span class=''badge badge-success small''>
  <i class=''icon-user icon-white''></i>
  <i class=''icon-user icon-white''></i>
  <i class=''icon-user icon-white''></i>
</span>

Answer 2

Los glifos y otros íconos pueden redimensionarse de manera precisa con el font-size: propiedad CSS font-size:

Ya sabes ... ser glifos y todo.

Answer 3

Nada de lo anterior funcionó para mí, estoy usando una combinación de iconos Bootstrap 4 y FontAwesome. Descubrí que Bootstrap 4 tiene su propia clase para hacer botones más pequeños:

<button class="btn btn-sm btn-secondary ">
    <i class="fa fa-pencil"></i>
</button>

Documentación de 4 botones de Bootstrap (# Tamaños)

Si desea hacer un botón más pequeño que este, probablemente tendrá que hacer algunos css personalizados, ya que simplemente cambiando el tamaño del icono ya no modificará el tamaño del botón de ajuste.

Answer 4

Puedes usar class="btn btn-xs"

Referencia: https://getbootstrap.com/components/

Answer 5

Puedes usar Font Awesome http://fortawesome.github.com/Font-Awesome/ para crear un ícono a partir de fuentes.Font Awesome es totalmente compatible con Twitter Bootstrap 2 y 3. Puedes diseñar el ícono del color, tamaño, sombra y cualquier cosa fácilmente. eso es posible con CSS.

Answer 6

Si está utilizando Bootstrap 3, puede usar la etiqueta <small> , de esta manera: <small><span class="glyphicon glyphicon-send"></span></small> Funciona perfectamente con Bootstrap 3.