Font Awesomeの簡単な導入方法と使い方

Font Awesomeの簡単な導入方法と使い方

2025年01月20日

色々なサイトやブログでFont Awesomeのアイコン（Webフォント）をよく見かけます。

こういったアイコンを一度はご覧になったことがあるかと思います。今回はこのFont Awesomeの導入方法と使い方、注意点などについて説明していきます。

目次

Font Awesomeの導入について

Font Awesomeのアイコン（Webフォント）を使用するにあたり、準備することがあります。

Font Awesomeのアイコン（Webフォント）を読み込まないといけないのですが、その読み込みの方法が3パターン存在します。

Font Awesomeの読み込み方法
  • CDNの利用
  • Font Awesome kitの使用
  • フォントファイルをサーバーにアップロード

Font Awesomeのアイコン（Webフォント）を利用している方のほとんどが上記のうちの方法で読み込みを行なっているかと思います。

ただ「Font Awesome kitの使用」と「フォントファイルをサーバーにアップロード」に関しては、Font Awesome公式サイトにてアカウントの登録が必要となり、かつFont Awesome kitを無料で使用する場合はアクセスの上限設定（無料版は1万PV/月）がされています。

また、CDNの利用に関しても、Font Awesome公式のCDNも2021年に廃止されています。

ではどうするかというと、cdnjsというサイトにてFont AwesomeのCDNを配信しているので、そこからコードの取得を行います。。

公式サイトは「Font Awesome kitの使用」を推奨しているのですが、とりあえず手っ取り早くFont Awesomeを使ってみたいという場合であればcdnjsからコードを取得するといいかもしれません。

2025年1月16日時点では以下のコードが最新のものとなっています。

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css

では、このcssファイルを読み込んでいくわけですが、wordpressではこのように読み込んでいきます。

function theme_enqueue_styles(){
　wp_enqueue_style('font-awesome','https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
}
add_action('wp_enqueue_scripts','theme_enqueue_styles');

functions.phpファイルに上記ソースを追記すればOKです。これでアイコン（Webフォント）を表示させる準備が整いました。

ただ、CDNに関しては今後使用できなくなる可能性もなくはないので、今後もFont Awesomeを利用したいと考えているのであれば、公式サイトでアカウント登録を行い「Font Awesome kitの使用」か「フォントファイルをサーバーにアップロード」を検討した方がいいでしょう。

Font Awesomeのアイコンを<i>タグで表示する

ではここからFont Awesomeのアイコンを表示する方法について説明していきます。Font Awesomeのアイコンを表示する方法は2パターンあります。

  • <i>タグを使う
  • CSS疑似要素で表示する

まずは<i>タグを使う方法です。

Font Awesome公式のアイコン検索ページで使いたいアイコンを探します。

Font Awesome公式のアイコン検索ページ
Font Awesome公式のアイコン検索ページ

画像のように使用したいアイコンが見つかったらクリックをします。すると以下の画像のようにポップアップウインドウが開きます。

選択したアイコンのhtmlタグ
選択したアイコンのhtmlタグ
<i class="fa-solid fa-check"></i>

ここをクリックすればタグをコピーできるので、使用したい箇所へペーストすればOKです。

ここにチェックのアイコンを表示しました。

また、アイコンの色や大きさを変更したい場合は、画像左下にある「パレット」のアイコンをクリックするとポップアップウインドウが広がりCOLORSIZEROTATEFLIPといった選択項目が現れますので、そこから色や大きさなどを変更することができます。

アイコンの色や大きさなどの変更
アイコンの色や大きさなどの変更

大きさと色を変更したアイコンです。

さらに、左下のパレットの隣にある映画のフィルムのようなアイコンをクリックすると、アイコンに動きを付けることも可能です。

アイコンのアニメーションが選択可能
アイコンのアニメーションが選択可能

アイコンをバウンドさせています。

このようにFont Awesomeの公式ページで設定したとおりにhtmlを作成してくれるので非常に簡単にアイコンを表示させることができます。

Font AwesomeのアイコンをCSS疑似要素で表示する

次にCSS疑似要素を使ってアイコンを表示する方法です。

今回は::beforeもしくは::afterといったタグの疑似要素にアイコンを表示させていきます。

<i>で表示するときと同じように、Font Awesome公式のアイコン検索ページで使いたいアイコンを探します。

アイコンのコード(ユニコード)を確認
アイコンのコード(ユニコード)を確認

画像右上にあるf0c9というアイコンを指定するコード(ユニコード)をクリックします。（クリックすると自動的にコピーしてくれます）

そしてこのコードを以下のようにCSSで指定します。

.icon-box::before{
  font: var(--fa-font-solid);
  content: "\f0c9";
  position: absolute;
  top: 5px;
  left: 5px;
}
<div class="icon-box">
  <p>ハンバーガーメニューのアイコンが表示されました</p>
</div>

アイコンのサイズや色を変更したい場合は、CSSでfont-size:やcolor:を指定してやればOKです。

ひとつ注意点として、アイコンのコードを取得する際、以下の部分がどのようになっているかを確認してください。

fa-solidの部分を確認
fa-solidの部分を確認

これは何を確認しているかというと、先ほどのCSSの疑似要素でfont:を指定しているのですが、使用したいアイコンがfa-solidとなっているので、それに合わせてfont:の内容を変更するためです。

/* 使用したいアイコンが solid */
.icon::before{
  font: var(--fa-font-solid);
  content: "ここにユニコード";
}

/* 使用したいアイコンが regular */
.icon::before{
  font: var(--fa-font-regular);
  content: "ここにユニコード";
}

/* 使用したいアイコンが brands */
.icon::before{
  font: var(--fa-font-brands);
  content: "ここにユニコード";
}

このような形でsolidregularbrandsで指定を変えていきます。

ちなみにこの方法はFont Awesome Free版のバージョン6での指定方法です。以前のバージョンでは表示方法が異なりますので注意してください。

Font Awesomeのアイコンはここで紹介した以外にも様々なclassがあります。

Font Awesomeの公式ページ「Styling with Font Awesome」に詳しく載っていますので、そちらも参考にされるとより色々な使い方ができるかと思います。