主要なアイコン・ロゴをまとめた Font Awesome についてまとめています。

目次

公式・関連サイト

簡単な使い方

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

Start a New Project with a Kit | Font Awesome

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

font-awesome | cdnjs

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

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

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

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

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

Icons Free | Font Awesome

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

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

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

関連する用途

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

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

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

主なアイコン

バージョンによって使えるアイコンは異なります。

Icons Free | Font Awesome

特にこのアイコンはよく使うと思われるところをいくつか貼り付けています。
ごく一部で、他にも沢山あります。おそらく希望のアイコンがあるでしょう。
いくつか種類が存在している場合もあります。

パソコン・モバイル

アイコン タグ
<i class="fas fa-keyboard"></i>
<i class="fas fa-desktop"></i>
<i class="fas fa-mobile-alt"></i>
<i class="fas fa-mouse"></i>
<i class="fas fa-laptop"></i>
<i class="fas fa-tablet-alt"></i>

文字

アイコン タグ
<i class="fas fa-asterisk"></i>
<i class="fas fa-at"></i>
<i class="fas fa-hashtag"></i>

汎用

アイコン タグ
<i class="fas fa-archive"></i>
<i class="fas fa-bars"></i>
<i class="fas fa-bell"></i>
<i class="fas fa-bookmark"></i>
<i class="fas fa-check"></i>
<i class="fas fa-cloud"></i>
<i class="fas fa-code"></i>
<i class="fas fa-comment"></i>
<i class="fas fa-ellipsis-v"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-exclamation-triangle"></i>
<i class="fas fa-file-alt"></i>
<i class="fas fa-folder"></i>
<i class="fas fa-globe-asia"></i>
<i class="fas fa-home"></i>
<i class="fas fa-id-card"></i>
<i class="fas fa-info-circle"></i>
<i class="fas fa-link"></i>
<i class="fas fa-lock"></i>
<i class="fas fa-moon"></i>
<i class="fas fa-music"></i>
<i class="fas fa-power-off"></i>
<i class="fas fa-terminal"></i>
<i class="far fa-thumbs-up"></i>
<i class="fas fa-wifi"></i>

ブランドアイコン

ここから下はブランドアイコンです。
世界的に使われているブランド・サービスのアイコンが整っていますので、
日本のみなど、特定の国だけで主力のサービスは存在しないものがあります。

プログラミング言語

アイコン タグ
<i class="fab fa-js"></i>
<i class="fab fa-node"></i>
<i class="fab fa-php"></i>
<i class="fab fa-python"></i>

Web ブラウザ

アイコン タグ
<i class="fab fa-chrome"></i>
<i class="fab fa-firefox"></i>
<i class="fab fa-edge"></i>
<i class="fab fa-internet-explorer"></i>
<i class="fab fa-opera"></i>
<i class="fab fa-safari"></i>

Git

アイコン タグ
<i class="fab fa-bitbucket"></i>
<i class="fab fa-git"></i>
<i class="fab fa-git-alt"></i>
<i class="fab fa-github"></i>
<i class="fab fa-github-alt"></i>
<i class="fab fa-gitlab"></i>

SNS

アイコン タグ
<i class="fab fa-facebook"></i>
<i class="fab fa-facebook-messenger"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-line"></i>
<i class="fab fa-wikipedia-w"></i>
<i class="fab fa-youtube"></i>

クラウドサービス

アイコン タグ
<i class="fab fa-aws"></i>
<i class="fab fa-dropbox"></i>
<i class="fab fa-google-drive"></i>

その他 ブランド

アイコン タグ
<i class="fab fa-amazon"></i>
<i class="fab fa-android"></i>
<i class="fab fa-apple"></i>
<i class="fab fa-blackberry"></i>
<i class="fab fa-ebay"></i>
<i class="fab fa-google"></i>
<i class="fab fa-microsoft"></i>
<i class="fab fa-windows"></i>

なお <i class="fab fa-yahoo"></i> はアメリカ Yahoo! のロゴです。
以前は Yahoo! JAPAN と同等ですが、ロゴを変えています。

Q&A

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

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

Font Awesome Free はフリーライセンスが明示されているので、
商用も含めて自由に使用できます。これはブランドアイコンも含まれます。

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

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

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

ほしいアイコンが存在しないのですが……

Simple Icons から探してみて下さい。こちらにはあるかもしれません。

🎈 Simple Icons

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

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

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

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

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

[markup.goldmark.renderer]
  unsafe = true

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

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

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