主要なアイコン・ロゴをまとめた Font Awesome（フォントオーサム）についてまとめています。

目次

公式・関連サイト

Font Awesome v6

 Versions of Font Awesome

2022年2月 Font Awesome v6 が正式公開となりました。

v6 になって class の割り当てが変化していますが、
v5 の class 名も v6 で有効ですので、そのまま v6 向けに移行して問題ありません。
ただしアイコン画像の変化による表示の変化が発生する場合があります。

このページではすでに Font Awesome v6 向けの class 名に変更済みです。
実際に balloon.asia は Font Awesome v6 へ移行を完了させています。

簡単な使い方

公式な手順では次のページからメールアドレスを登録し、その中でコードを得られます。
有料で提供されている Pro プランを管理できるようにするためでしょう。

 Get Started with Font Awesome | Font Awesome

cdnjs でも存在しています。🎈 Cloudflare CDN 使用で、こちらを使っているものも多いです。
このページではこの cdnjs を使った方法で紹介しますが、
公式の手段を使った方が言い場合もあるようです。

 font-awesome | cdnjs

表示方法は Web フォントと SVG の 2 種類があります。
Web フォントは <link> タグを <head> 内に入れます。
6.1.1 はバージョンです。

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

SVG は <script> タグを <head> 内に入れます。
6.1.1 はバージョンです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>

目的のアイコンを探しましょう。無料でも 1600 種類以上のアイコンがあります。
薄くなっているのは有料プラン Pro で使用できるアイコンです。
1600 種類すべてを表示して探すのは大変なので、
英文でキーワードを入力する事で、アイコンを厳選し、
そこから目的のアイコンを探すようにします。

 Icons  Free | Font Awesome

クリックすると拡大表示と共に <i class="～"></i> が表示されています。
これを貼り付けます。例えば

<i class="fa-brands fa-font-awesome"></i>

このタグで  が表示されます。

関連する用途

🎈 Hugo のテーマなどで Font Awesome が使われているケースがあります。

[menu]
  [[menu.main]]
    name = "ホーム"
    pre = "<i class=\"fa-solid fa-house\"></i>>"
    url = "/"
    weight = 1

<i class="fa-solid fa-house"></i> と Font Awesome のタグが存在します。  です。
また <i> タグに囲まれず fas fa-home のみが表記されているテーマもあります。
fa～ ではじまる部分を見かけたら Font Awesome のアイコンを指定しているので、
これを追加・変更して、アイコンを使用・変更する事ができます。

Q&A

ブランドアイコンも含めて自由に使用して良いのですか？

 Font Awesome Free License | Font Awesome
 License | GitHub FortAwesome/Font-Awesome

Font Awesome Free はフリーライセンスが明示されているので、
商用も含めて自由に使用できます。これはブランドアイコンも含まれます。
使用違反報告で削除対処もしっかり行われているので、
その点も考慮してブランドアイコンも採用されていると思って良いでしょう。

通常の文字、絵文字とは何か異なるのですか？

メールアドレスを表現するために通常の全角文字 ＠ の代わりに  を用いたり、
更に  も選択肢があります。よりわかりやすく効果的です。
絵文字には ✉️ が存在しますが、カラーフォントが多くなります。
Font Awesome は文字同等のモノクロ表示になり、文字と同じ色で表示されます。

また、絵文字は様々な用途を想定して作成され、日本発なので日本固有の文字も含まれます。
Font Awesome は IT 系寄りで、世界的によく使われているアイコンが集まっています。

貼り付けたのですが、表示されません。

他のアイコンも表示できないか試してみて下さい。

一部のアイコンだけが表示できない場合は主に次が原因です。

  • Pro 版のアイコンを使用しようとして表示されていない
  • バージョンが古い Font Awesome のため、アイコンが対応していない

どのアイコンも全く表示できない場合は
<head> に貼り付けているタグを確認してみて下さい。
また HTML タグ <i class="～"></i> を使用しますが、
🎈 Hugo は 0.60 よりデフォルトで HTML を無効化しています。
config.toml に次を追加して HTML を記載できるようにできます。

[markup.goldmark.renderer]
  unsafe = true

一部のアイコンが表示できません。

Font Awesome はバージョンにより表示できるアイコンとタグが変化しています。
古くなっている可能性があるため、最新に更新するか、
古いバージョンでのタグ検索をしてみます。

最近のバージョンでは <i class="fa-brands fa-font-awesome"></i> のようになっていますが、
この場合 fab を fa に変えてみると表示できたりするかもしれません。