Modification de la Largeur de la Police Impressionnant Icônes

Je suis en train de régler la mise à l'échelle et de la largeur d'une icône. Je suis précisément en essayant de faire de l'icône

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

plus large, mais pas plus grand.

Je ne suis pas d'essayer de le faire fa-2x ou fa-3x. Je suis en train de mettre à l'échelle, de sorte que la largeur est, disons 150%, tandis que la hauteur est toujours de 100%.

  • Pour la police génial, vous devez utiliser une taille de police pour ajuster la taille
  • font-size utilise fixe de mise à l'échelle. Je suis en train de l'échelle de la largeur de façon indépendante de la hauteur.
  • Peut-être que cela aiderait? stackoverflow.com/a/16447826/107244
  • Police Génial, c'est une police de caractères, et les icônes sont en fait des textes, de sorte que votre question devrait être puis-je tronçon de texte: stackoverflow.com/questions/6351013/css-can-i-stretch-text
InformationsquelleAutor RedDwarfian | 2015-02-17
  1. 39

    Vraiment facile à l'aide de l'échelle

    .fa { transform: scale(1.5,1); }
    • Ouais, j'espérais que je n'aurais pas à utiliser des transformations, mais comme c'est une police, je suppose que je dois. Je vous remercie.
    • très bien, merci. devrait utiliser des navigateurs préfixe trop? -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);
    • Qui a travaillé comme un charme. Bien que je l'ai utilisé pour augmenter la hauteur de la police génial icône, mais encore il m'a donné une idée.
    InformationsquelleAutor Adam
  2. 1

    Cette réponse ne fonctionne que lorsque vous essayez de régler les icônes dans la liste. Mais je vous poste ça parce que je suppose que certaines personnes visitant cette page est dans cette situation.

    Si vous êtes donc à l'application de "fa-fw" classe d'icônes permet de résoudre les problèmes.

    Exemple 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

    InformationsquelleAutor ohkts11