web-dev-qa-db-ja.com

Font Awesomeアイコンの幅の変更

アイコンのスケーリングと幅を調整しようとしています。私は特にアイコンを作ろうとしています

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

幅は広いが背は高くない。

私はそれを作ろうとはしていないfa-2xまたはfa-3x。幅が150％になるようにスケーリングしようとしていますが、高さは100％のままです。

htmlcssfont-awesome
25
RedDwarfian

スケールを使用して本当に簡単

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

この回答は、リスト内のアイコンを調整しようとしている場合にのみ機能します。しかし、このページにアクセスする一部の人々はこの状況にあると思うので、私はこれを投稿しています。

アイコンに「fa-fw」クラスを適用している場合、問題は解決します。

ドキュメントの例。

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

ドキュメント https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

2
ohkts11