El cambio de Ancho de Fuente Impresionante Iconos

Estoy tratando de ajustar el tamaño y la anchura de un icono. Estoy específicamente tratando de hacer que el icono

<i class="fa fa-bars fa-lg"></i>

más amplio, pero no más alto.

No estoy tratando de hacer fa-2x o fa-3x. Estoy tratando de escala de modo que el ancho es, digamos 150%, mientras que la altura es de 100%.

InformationsquelleAutor RedDwarfian | 2015-02-17

2 Kommentare

  1. 44

    Muy fácil utilizando la escala

    .fa { transform: scale(1.5,1); }
    • Sí, tenía la esperanza de que yo no tendría que usar transformaciones, pero ya que es una fuente, supongo que tengo que. Gracias.
    • muy bien, gracias. debe utilizar los navegadores prefijo demasiado? -webkit-transform: scale(1.5,1); -moz-transform: scale(1.5,1); -ms-transform: scale(1.5,1); -o-transform: scale(1.5,1); transform: scale(1.5,1);
    • Que trabajó como un encanto. Aunque yo lo he utilizado para aumentar la altura de la fuente impresionante icono pero aún así me dio una idea.
    • Esto distorsiona los iconos. utilizando la fuente-tamaño superior div/elementos de trabajo bien para mí.
    • sí, claro que lo hará. Sin embargo, el OP preguntó I'm specifically trying to make the icon wider, but not taller. que es por eso que esta es la respuesta correcta a la pregunta.
  2. 2

    Esta respuesta sólo funciona cuando usted está tratando de ajustar los iconos en la lista. Pero estoy publicando esto porque me imagino que la gente que visita esta página se encuentra en esta situación.

    Si usted está solicitando «fa-fw» la clase de los iconos resuelve los problemas.

    Ejemplo de docs.

    <div style="font-size: 2rem;">
      <div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
      <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
      <div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
      <div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
      <div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
    </div>

    Docs
    https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea