web-dev-qa-db-fra.com

Modification de la largeur des icônes impressionnantes de police

J'essaie d'ajuster l'échelle et la largeur d'une icône. J'essaie spécifiquement de faire l'icône

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

plus large, mais pas plus haut.

Je n'essaye pas de le faire fa-2x ou fa-3x. J'essaie de le mettre à l'échelle pour que la largeur soit, disons, de 150%, tandis que la hauteur est toujours de 100%.

htmlcssfont-awesome
25
RedDwarfian

Vraiment facile à utiliser la balance

.fa { transform: scale(1.5,1); }
40
Adam

Cette réponse ne fonctionne que lorsque vous essayez d'ajuster les icônes de la liste. Mais je poste ceci parce que je suppose que certaines personnes visitant cette page sont dans cette situation.

Si vous appliquez ainsi la classe "fa-fw" aux icônes, cela résout les problèmes.

Exemple de documents.

<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>

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

2
ohkts11