無料ホームページテンプレート Template Party

Font Awesomeを使ってみる(2021/11/26)

htmlの<i>要素で簡単にアイコンを表示できる海外サービスの使い方の解説です。
テンプレートに組み込まれているものもあり、それを入れ替えたい場合にもご参照下さい。

  1. アイコンを使う為の準備
  2. アイコン画像を読み込む
  3. cssでアイコン画像を読み込む

アイコンを使う為の準備をします

※既にFont Awesomeアイコンが搭載されているテンプレートはこの準備作業は不要です。

Font Awesomeにアクセス

font awaseomeのCDNにアクセスします。
Versionのプルダウンからbeta以外で新しめなものを選べばいいと思います。今回は5.15.4を選びました。
次に、鎖のアイコンをクリックしてurlをコピーします。

お手元のhtmlのhead内に貼り付けます。

コピーされるのはurlだけなので、前後のタグは手打ちして下さい。
他のcssファイルの読み込み行があると思うので、それをコピペしてurl欄だけ入れ替えればOKです。
※配布中のテンプレートによっては、cssフォルダのstyle.cssの冒頭で読み込んでいる場合もあります。

下準備はこれで完了です。

アイコン画像を読み込もう

Font Awesomeのアイコン一覧ページにアクセスします。

Font Awesome アイコン一覧ページへアクセスし、以下の赤枠部分にキーワード(※英語で入力します)を入力して検索して下さい。

今回は「PC」と入力してみます。

すると以下の検索結果が出ました。(検索結果は入力時にリアルタイムに出てきます)

気に入ったアイコンをクリック

詳細ページが開きますので、以下の赤枠(i要素のタグ)をクリックでコピーします。

あとはhtmlに貼り付けるだけ。これです→ 

そこにあるテキストと同じ見た目で反映されます。便利ですね。
色やサイズもフォントを扱う際と同じ設定方法で変更できます。

cssでアイコン画像を読み込む方法

詳細ページを開くまでは先ほどと同じ手順です。
選択する部分が異なり、以下の赤枠部分になります。

このコードをcssの擬似要素(::before、::after)で読み込みます。

以下は例で、赤い文字が直接font awesomeに関連する部分です。

h5 {font-size: 50px;}
h5::before {
font-family: "Font Awesome 5 Free";
content: "\f108";
font-weight: bold;
color: #389168;
padding-right: 10px;
}

出力例

解説:
font-familyの行は、font awesome(無料版)をcssで使う場合に必須な行です。今後、この部分が変更される可能性もあるのでご注意下さい。
contentの行に、先ほどのコピーしたタグを書き込みます。
font-weightの行は、本来は「不要」です。選んだアイコンによって正常に出力されない場合があり、その際にこれを入力すると出るようになると読んではいたのですが、今回、まさにそれでした。ちなみに他のfont系のスタイルでもよかったと思いますが何だったか忘れました。