1

Tengo el siguiente icono "fa fa-bars", el cual le incluyo en mi HTML de la siguiente manera:

<i class="fa fa-bars fa-lg" style="color:#FFFFFF;"/></i>

Si deseo ampliarlo al doble debería añadir:

<i class="fa fa-bars fa-2x fa-lg" style="color:#FFFFFF;"/></i>

¿Y si deseo reducir el tamaño de la imagen? ¿Se podría usar width y height? No me funciona esas propiedades.

<i class="fa fa-bars fa-lg" style="color:#FFFFFF;" width="6" height="6"/></i>

1
  • Entiendo que estás utilizando una fuente de iconos. Lo que deberías hacer es utilizar font-size para cambiar el tamaño de la fuente. Commented el 9 nov. 2017 a las 11:58

3 respuestas 3

15

La manera de hacer esto según la documentación es así:

i{
  color: black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<i class="fa fa-bars fa-xs"></i>
<i class="fa fa-bars fa-sm"></i>
<i class="fa fa-bars fa-lg"></i>
<i class="fa fa-bars fa-2x"></i>
<i class="fa fa-bars fa-3x"></i>
<i class="fa fa-bars fa-4x"></i>
<i class="fa fa-bars fa-5x"></i>
<i class="fa fa-bars fa-10x"></i>

1
  • Esta es la respuesta correcta. Saludos y gracias
    – brujita
    Commented el 12 nov. 2018 a las 20:24
6

Tienes la etiqueta style cerrada.

<i class="fa fa-bars fa-lg" style="color:#FFFFFF; width:6; height:6;"/></i>

Por otra parte, creo que los iconos funcionan con la propiedad font-size.

2
  • 3
    efectivamente, las clases fa-lg y demás usan font-size Commented el 9 nov. 2017 a las 12:08
  • Lo solucioné poniéndole en la hoja de estilos al <i class="fa fa-bars fa-lg desplegable", un estilo llamado: .desplegable{ font-size: 1em; }
    – omaza1990
    Commented el 10 nov. 2017 a las 8:33
0

Tuve el mismo problema, claro lo puedes hacer con fa-xs ,lg, 2x,3x, etc.Pero si quieres cambiar el tamaño de una etiqueta i .

Y si quieres cambiar el tamaño del icono con font-size , tienes que poner la etiqueta i en un contenedor ...

Por ejemplo:

<div class="container">
    <i class="fa fa-bars"></i>
</div>


//estilos

.container {
    font-size: 30px;
}

espero te sirva

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.