FontAwesomeアイコンのサイズ変更方法


  1. CSSを使用した方法: FontAwesomeアイコンには、アイコンのサイズを変更するためのクラスが用意されています。例えば、fa-lgクラスを使用すると、アイコンのサイズが大きくなります。以下のようにHTMLにクラスを追加することで、アイコンのサイズを変更できます。
<i class="fas fa-heart fa-lg"></i>

上記の例では、fa-lgクラスを使用してハートアイコンのサイズを大きくしています。他にも、fa-xs(最小サイズ)、fa-sm(小さいサイズ)、fa-2x(2倍のサイズ)など、さまざまなサイズクラスが用意されています。

  1. 直接スタイルを指定する方法: CSSクラスを使用せずに、直接スタイルを指定してアイコンのサイズを変更することもできます。以下のように、style属性を使用してアイコンのサイズを指定します。
<i class="fas fa-heart" style="font-size: 24px;"></i>

上記の例では、font-sizeプロパティを使用してハートアイコンのサイズを24ピクセルに設定しています。この方法を使うと、細かなサイズ調整が可能です。

以上が、FontAwesomeアイコンのサイズ変更方法のシンプルで簡単な例です。他にもさまざまな方法がありますので、公式のFontAwesomeドキュメントを参照することをおすすめします。