【CSS】Font Awesome アイコンを疑似要素で付ける方法【before , after】

2023/05/04 Web

Webでアイコンを扱う方法として「Font Awesome」を利用するやり方が有名ですね。

今回は、WordPress のブログに「パンくずリスト」を導入したので、「ホーム」の手前にアイコンをつけたかったので、「Font Awesome」アイコンを CSS の疑似要素を使ってつけてみました。

Font Awesome とは

「Font Awesome」とはかんたんに言えば、アイコンをフォントとして表示させることができる Web サービスです。

リンク

Font Awesome

アイコンを読み込む方法として「CDN」「サーバーにファイルを配置」「Kit」の３通りがあります。そして、無料版と有料版があります。

今回は「CDN」で無料版で利用します。「CDN（コンテンツデリバリーネットワーク）」については詳しくは難しいので割愛しますが、やり方は後述の手順で「Font Awesome」のアイコンを使用することができます。

CDNとは、Web上で送受信されるコンテンツを効率的に配送するために構築されたネットワーク。また、これを利用して顧客企業のコンテンツを高速に配信するサービス（CDNサービス）。
IT用語辞典e-Words

CSSで「Font Awesome 」アイコンを実装する！

大まかなやり方

・「Font Awesome」サービスを利用できるようにする
・html で任意の class 名を記述する
・css にコードを記述する

初歩的なテクニックですが簡単にアイコンを使用することができて、一度やってしまえば次からは臆することなく使えるので、ぜひマスターしておきたいやり方です！

「Font Awesome」サービスを利用できるようにする

まず「Font Awesome」サービスを利用するための下準備をします。特に難しいことはありません。html　の head 内に下記コードを記述します。

<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">

何をしたのかというと、ふわっというと「Font Awesome」を読み込めるようにしました。

ちなみに「Font Awesome」を「CDN」で読み込む場合は、「WEBフォント」か「SVG と JavaScript」で読み込む方法に分かれます。上記のコードは「WEBフォント」で読み込む方法です。またバージョンは「Font Awesome 5 Free」バージョンを指定しています。

メモ

現在「Font Awesome」の「CDN」は近い未来、廃止予定です。ただし現状まだ使用できるのでとりあえずはこのやり方で実装しています。正式に廃止になる時期がアナウンスされ次第、他の方法でアイコンを扱えるようにしたいですね。

WordPress で上記のコードを入れる場合は、プラグインを使用するか、テーマファイルエディターを編集する必要がありますので、その際は十分に注意が必要です。

htmlで任意のclass名を記述する

今回はパンくずリストということで<ol>タグで作ってみます。ここでは「HOME」にアイコンを付けたいので<a>要素にclass名を付けました。（アイコン自体にリンク機能を付けたくない場合は<li>にclass名を付けるのもありだと思います。）

<ol class="breadcrumb">
  <li><a class="breadcrumb-home">HOME</a></li>
  <li><a>カテゴリ</a></li>
  <li><a>タイトル</a></li>
</ol>

すでにコードがある場合は、アイコンを付けたい要素の class 名をメモしておき、それに疑似要素（次項にて）を付加してスタイルを適用させてあげるのがいいと思います。

cssにコードを記述する

ここがポイント！アイコンを付けたい要素に疑似要素を付加してスタイルを指定します。今回の場合は手前にアイコンを付けたいので「::before」疑似要素を使用します。

See the Pen Untitled by MATSUDAI (@matsudai) on CodePen.

最低限必要なコードは上の３つ。あとはお好みで調整すればイイですね！

スタイルを適応させるとこんな感じになりました。

content : ‘◯◯’ ; でアイコンの種類をします。◯◯の部分は「Unicode」といって使いたいアイコンの「Unicode」を入力すれば任意のアイコンを表示させることができます。「Unicode」は「Font Awesome」公式サイトで探すことができます。

表示されない原因

ちゃんと記述してるのに、アイコンが「 □ 」になってうまく表示されない！というときは以下の点についてチェックしてみてください。

・font-weight
free 版ではの値は通常アイコンは「900」、ブランドアイコンは「400」でしか使えません。

・font-family
通常アイコンを使用する場合の値は「Font Awesome 5 Free」、ブランドアイコンは「Font Awesome 5 Brands」

まとめ

“手っ取り早くアイコンを実装したい！”なら「Font Awesome 5 Free」を CSS の疑似要素で実装することできます！header と CSS にコードを記述するだけで簡単に使うことができるので、ぜひやってみてください！
ただし、今後無料で使える方法はなくなる可能性があるので、有料版を利用するか、自前でアイコンを用意するか考えなければいけませんね。