アットウィキロゴ
アニヲタWiki(仮)
アットウィキロゴ
アニヲタWiki(仮)
ページ一覧

Font Awesome

登録日：2026/05/24 Sun 18:55:27
更新日：2026/07/20 Mon 18:49:44
所要時間：約 10 分で読めます


Font Awesome(フォント・オーサム)とは、Dave Gandy氏が2012年に公開したオープンソースのWebアイコンフォントプロジェクト。
およびそこから派生した、無料のWebアイコンフォントサービスである。
「Awesome」とは「凄い、すばらしい」という意味のかなり砕けた言葉であるため、日本語訳するなら「すげぇフォント」「（いい意味で）ヤバいフォント」とでもなるか。

アニヲタwikiもそうであるが、通常、アイコンをはじめとする絵や図をWebサイト上で使うには、それにあたる画像のアップロードが必要となる。
画像を沢山入れればサイトが重くなるし、いちいち探してくるのも面倒。
当然、画像を入れておくためのサーバ代だってばかにならない。

もしくは、画像のバイナリをBASE64という文字列形式にエンコードして、ブラウザ上でそれをデコードして表示する、という手法も取れる。
ただ、極々小さいアイコンならともかく、そこそこのサイズの画像を変換するとかなり長大な文字列になってしまう。
例えば1kB程度のごく小さなアイコンでも、BASE64形式にすると約1400文字にもなる。約3分で読めます。

じゃあ、「アイコンくらいなら絵文字でよくない？」と思うかもしれない。
だが、絵文字はデバイスによって表示が変わってしまう可能性があるという欠点がある。
❤ ←これは“red heart”と名前の付いている絵文字（U+2764）だが、環境によっては黒いハートに見えることもあるだろう。
🐦‍⬛ ←これは“black bird”と名前の付いている絵文字（U+1F426U+200DU+2B1B）だが、環境によっては鳥と黒い四角が横並びになっているように見えるだろう。

このように、画像やアイコンは意外と扱いが難しいものなのだ。
だからといって、文字だけのサイトというのもそれはそれで寂しいもの。

だが、Font Awesomeを使えば、
  • 拡大しても劣化しない
  • 色が自由に変えられる
  • テキストと自然に並ぶ
  • 環境によって見た目が変わらない
というメリットを享受しつつ、Webサイトやwikiページをアイコンで手軽に彩ることができる。
これはサイトを作る側の立場にとっては非常にありがたいことなのである。


▷ 目次


概要

Font Awesomeは具体的に言えば「アイコンフォント」というものから出来ている。
アイコンフォントとは、画像ファイルではなくフォントデータとしてアイコンを提供する技術のこと。
絵や記号を文字と思い込ませた状態でコンピュータに記憶させる……と表現すれば、なんとか伝わるのではないだろうか？

これにより、拡大・縮小しても画質が劣化しない（ベクター形式であるため）、CSSで色やサイズを自由に変更できる、テキストと自然に並べられる、といった利点がある。従来の画像アイコンと比べて柔軟性が格段に高く、Webデザインにおける標準的なアイコン手法として広く定着している。

現在の最新版（ver.6系）では、無料プランでも約2,000種類のアイコンが利用でき、有料Pro版では33,000種類以上に及ぶ。SNSのロゴ（X（旧Twitter）、YouTubeなど）、UI向けの汎用アイコン（矢印、ハート、星、チェックマークなど）、絵文字的なイラスト系アイコンなど、カテゴリも多岐にわたる。

〔歴史〕

Font Awesomeの歴史は、2012年の最初のリリース（バージョン3）でBootstrap*1というフロントエンドフレームワークの付属ツールとして世に出たのが始まりである。

Bootstrapが登場したころのWebサイトは、色もデザインもあったものではなかった。
サイトを彩るためには面倒くさいCSS*2をイチから手書きしたり、妙な挙動をするfloatやらtableやらと悪戦苦闘しなければならず、さらに画像をどこかから取り込んでこなければ彩りも持たせられなかった。
ようは、作るのが只管面倒くさかったのである。

そのへんの諸問題を解決したBootstrapは手軽さからWebサイト制作者の間で爆発的に普及したフレームワーク*3であり、Font AwesomeはBootstrapとセットで使われることで一気に認知度を高めた。

バージョン4（2013年）で、ここからFont Awesomeのみが独立したプロジェクトとして分離。
アイコンの種類が大幅に拡充。記法は `<i class="fa fa-アイコン名">` という形式で、全アイコン共通して`fa`クラスを使う非常にシンプルなものだった。このバージョン4の時代は特に長く続き、現在でもWebにはバージョン4の記法を解説した記事が大量に残っている。アットウィキでも長らくこのバージョンが使われていた。

転機となったのが2017年末にリリースされたバージョン5。
このバージョンではSVGベースのアイコン提供に対応し、アイコンの品質が大きく向上した。また、無料版と有料版（Pro）の区分が明確化されたほか、アイコンの種類ごとにスタイルクラスを使い分ける必要が生まれた。具体的には、塗りつぶしアイコンが`fas`、線画アイコンが`far`、ブランドロゴが`fab`というように、バージョン4の「全部`fa`」から分岐したのだ。これにより、バージョン4からの移行時に「記法が変わって表示されない」という混乱が多数発生した。

そして現在の主流がバージョン6（6.x系）である。2022年に登場したこのバージョンでは記法がさらに整理され、スタイル指定が`fas`等の短縮形から`fa-solid`等のフルネーム形式に変更された。CSSアニメーション機能も大幅に強化され、beatやbounce、spinなど視覚的に動きのあるアイコンが簡単に実現できるようになった。アットウィキは2024年1月にFont Awesomeを6.5.1にバージョンアップしており、現在のアニヲタWikiではこの最新バージョンのアイコンが利用できる。


〔主な使用場面〕

Font AwesomeはWordPressや各種ブログサービスからWebサービスのUIまで、あらゆるWebコンテンツで利用されている。特にボタンやナビゲーションのアイコンとして非常に一般的であり、普段何気なく目にしているアイコンの多くがFont Awesomeだった、というケースも珍しくない。

wikiサービスにおいては、アットウィキ（@wiki）がicon_faプラグインを通じてFont Awesomeを提供しており、アニヲタWikiを含む多くのアットウィキ製wikiで利用できる。記事の見出し装飾、キャラクター属性の表示、注意喚起マーク、評価の星並べなど、活用の幅は広い。


アニヲタwikiでの利用

……と、味気ない話はさておき、本題はここから。
アニヲタWiki（仮）が動作するプラットフォーム「アットウィキ（@wiki）」では、このFont Awesomeが公式に組み込まれており、専用のプラグインを使うことで誰でも簡単にアイコンを記事内に挿入できるのだ。
CDNの読み込みコードを書く必要もなく、規約だのセキュリティだの面倒くさい部分を気にする必要もなく、ただプラグイン記法を書くだけでアイコンが出現する。

アニヲタWikiが採用するアットウィキは、Font Awesome 6.5.1を標準で読み込んでいる（2024年1月時点でのアップデートによる）。
よって、アニヲタWikiで扱えるのもこのバージョンということになる。

注：プラグインの詳細や使用方法は、アップデートによって変わる可能性もあるため、＠wikiの利用ガイドも合わせて確認することをお勧めします。
アットウィキ(@WIKI)ご利用ガイド（リンク）

〔使い方〕

アニヲタWikiでFont Awesomeのアイコンを表示するには、以下のインラインプラグインを使うことで実現できる。 

&icon_fa(スタイル アイコン名 オプション)

構成要素は大きく3つ。スタイルとアイコン名は必須、オプションは省略可能である。 

&icon_fa(fa-solid fa-star)              ← スタイル＋アイコン名のみ（基本形）
&icon_fa(fa-solid fa-heart fa-beat)     ← オプション（アニメーション）追加
&icon_fa(fa-solid fa-star fa-2x)        ← オプション（サイズ）追加

スタイルとは「このアイコンをどの描画形式で呼び出すか」を指定するもので、`fa-solid`（塗りつぶし）や`fa-brands`（ブランドロゴ）がある。
アイコン名は`fa-star`や`fa-heart`のように`fa-`から始まる名称で指定する。
どちらも省略すると正しく表示されないため、必ずセットで書くこと。

なお、スタイルとアイコン名のペアが合っていなくても表示されない場合がある（例：ブランドロゴアイコンに`fa-solid`を指定するなど）。
スタイルの詳細は後述の「スタイルの一覧」を参照のこと。

アイコン名はFont Awesomeの公式サイト（fontawesome.com/icons）で検索できる。
公式サイトは英語のみ対応だが、「star（星）」「heart（ハート）」「check（チェック）」「fire（炎）」等、直感的に検索しやすい。
なお、検索結果には有料Pro版アイコンも混在しているため、フィルタで「Free」を選択してから探すと確実だ。

また、プラグインと組み合わせることでアイコンに色をつけることもできる。 

&font(red){&icon_fa(fa-solid fa-heart)}       ← 赤いハート
&font(#FF4500){&icon_fa(fa-solid fa-fire)}    ← カラーコード指定

実際の表示は以下のようになる。




〔アイコンの一例〕

wiki編集でとくに活躍しやすいアイコンを紹介する。
すべて`fa-solid`スタイルで使用可能で、一部は`fa-regular`も利用できる。

アイコン名 fa-solid fa-regular
fa-solid fa-star
fa-solid fa-heart
fa-solid fa-circle-check
fa-solid fa-circle-xmark
fa-solid fa-triangle-exclamation なし
fa-solid fa-triangle-exclamation なし
fa-solid fa-triangle-exclamation
fa-solid fa-circle-exclamation なし
fa-solid fa-fire なし
fa-solid fa-crown なし
fa-solid fa-shield-halved なし
fa-solid fa-skull なし
fa-solid fa-book なし
fa-solid fa-film なし
fa-solid fa-music なし
fa-solid fa-gamepad なし
fa-solid fa-wand-magic-sparkles なし
fa-solid fa-hand-point-right
fa-solid fa-circle-info なし
fa-solid fa-lightbulb
fa-solid fa-lock なし
fa-solid fa-unlock なし
fa-solid fa-pen なし
fa-solid fa-trash なし
fa-solid fa-magnifying-glass なし
fa-solid fa-ghost なし


〔スタイルの一覧〕

アットウィキで利用できるスタイルは以下の通り。
これ以外にもfa-regular（線画）やfa-light（細線）などのスタイルも存在する。
が、有料版なのでアニヲタwikiには多くが未実装。
使うなら、fa-solidとfa-brandsの２択となる。

スタイル名 実際の表示
fa-solid（塗りつぶし。通常のアイコンはこちら）
fa-regular（線画。ごく一部のアイコンに適用可）
fa-brands（企業・サービスのブランドロゴ）



〔オプションの一例〕

アイコン名の後ろにオプションを追加することで、アイコンを動かしたりサイズ変更したりできる。
オプション名 効果 実際の表示
fa-beat 鼓動するように拡縮
fa-fade フェードイン・アウト
fa-beat-fade 拡縮＋フェードの合成
fa-bounce 上下にバウンド
fa-flip くるりと反転
fa-shake 左右に振動
fa-spin 回転し続ける
fa-2x 2倍サイズ
fa-3x 3倍サイズ*4
fa-lg 少し大きめ：約1.25倍
fa-sm 少し小さめ
fa-fw 固定幅。並べた時に幅が揃う
fa-rotate-90 (時計回りに)90度回転
fa-rotate-180 (時計回りに)180度回転
fa-rotate-270 (時計回りに)240度回転
fa-flip-vertical 上下反転（垂直反転）
fa-flip-horizontal 左右反転（水平反転）
fa-border 枠線付き

ちなみに、オプションは組み合わせることも可能である。
※ただし、アニメーション系2つ等、同じタイプのオプションは組合せ不可 

&icon_fa(fa-solid fa-heart fa-beat fa-3x fa-fw fa-border)   ← 拡縮アニメーション＋3倍サイズ＋固定幅＋枠線



〔使われているページ〕

使われているページ一覧




追記・修正は人類に解読可能な範囲でお願いします。


この項目が面白かったなら……＼ポチッと/

▷ コメント欄
「Font Awesome」をウィキ内検索
最終更新：2026年07月20日 18:49

*1 靴ひも、を意味する

*2 よくわかんなければ「プログラミング言語」ぐらいの雑な解釈でよい

*3 一部機能を最初から作り込んでおくことで、簡単にシステムを組めるようにした、いわゆる作成キット

*4 以降は割愛するが、10xまでは指定可能