Font Awesomeの使い方入門｜アイコンの表示方法・サイズ変更・色の指定も解説

3

Views

Font Awesomeの使い方

Webサイトにアイコンを使いたいときに便利なのがFont Awesome（フォントオーサム）です。
矢印・電話・SNSロゴなど、豊富なアイコンを簡単に使える人気のライブラリです。この記事では、Font Awesomeの導入方法と基本的な使い方を初心者向けにわかりやすく解説します。

Font Awesomeとは？

Font Awesomeは、WebサイトにアイコンフォントやSVGアイコンを追加できる無料のライブラリです。
多くの開発者やデザイナーに利用されており、以下のようなアイコンを簡単に表示できます：

  • ソーシャルメディア（Twitter, Instagram, Facebook など）
  • UIアイコン（ハンバーガーメニュー、検索、ゴミ箱など）
  • 視覚的な補助アイコン（チェック、注意、ハートなど）

CDNでFont Awesomeを導入する

公式サイトから提供されているCDNを使えば、HTMLファイルに1行追加するだけでアイコンが使えるようになります。

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

※最新版のURLはFont Awesome公式サイト（fontawesome.com）で確認しましょう。

基本的なアイコンの使い方

アイコンを表示するには、<i>タグまたは<span>にクラス名を追加します。

<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-phone"></i>
<i class="fa-brands fa-twitter"></i>

クラスの種類：

  • fa-solid：実線アイコン
  • fa-regular：線画スタイル
  • fa-brands：ブランドロゴ（Twitter, YouTubeなど）

アイコンサイズを変更する

サイズを変更したいときは、クラスで指定することができます。

<i class="fa-solid fa-star fa-2x"></i>
<i class="fa-solid fa-star fa-3x"></i>
<i class="fa-solid fa-star fa-5x"></i>

サイズ指定クラス（例：fa-2x, fa-3x）は、通常サイズの2倍・3倍…を意味します。

アイコンに色をつける

アイコンは通常のテキストと同じようにCSSで色を変えられます。

.fa-heart {
  color: red;
}

.fa-twitter {
  color: #1da1f2;
}

よく使うアイコン一覧

  • fa-solid fa-magnifying-glass（検索）
  • fa-solid fa-envelope（メール）
  • fa-brands fa-facebook（Facebook）
  • fa-brands fa-line（LINE）

詳しくは公式の「アイコン一覧」を参照してください。

おわりに

Font Awesomeを使えば、サイトに視覚的なアクセントを加えたり、ナビゲーションをわかりやすくできます。
無料で手軽に導入できるので、ぜひ積極的に使ってみてください。

次回は「SVG版Font Awesomeの使い方」や「WordPressでの導入方法」も紹介していきます！

関連記事