FontAwesomeの使い方【オシャレなアイコンを表示する】

こんにちは、レイです。

今回は、FontAwesomeで「WING（AFFINGER5）」をオシャレにする方法をご紹介します。

FontAwesomeはたった1行でオシャレなアイコンやアニメーションをどこにでも表示できる無料ツールキットです。
アフィンガーには「FontAwesome 4」が標準実装されているので設定も簡単です。
※アフィンガーでなくとも使い方は同じなので、他のテーマでも応用が効きます。

FontAwesomeの基本的な使い方としては、ヘッダーメニューにアイコンを表示する方法や外部リンクにアイコンをつけるなどがあります。

よく使うアイコンとコードも一覧にまとめましたので後で見返すときに役立ちます。
それではさっそく見ていきましょう。

FontAwesomeとは？

FontAwesomeは、無料で650以上アイコンが利用できる、オープンソースのウェブフォントです。フォントスクリプトを使用するウェブサイトの中では約4割のユーザーが使用しています。

AFFINGER5をはじめとするブログテーマにはFontAwesomeが最初から組み込まれているので、たった1行入れるだけでオシャレなWebアイコンを表示できます。

FontAwesomeの基本的な使い方

FontAwesomeの基本的な使い方を順を追って解説します。

環境は、ブログテーマ「AFFINGER5」、バージョンはアフィンガー推奨の「fontawesome v4.7.0」を使用します。この他のテーマやバージョンでもやり方は変わらないので応用できます。

では手順を解説します。

step.1 Font Awesomeへアクセス

こちらからアクセスできます。
>>Font Awesome Icons

step.2 アイコンを検索する

例として「ホームアイコン」を設置します。
検索窓に「home」と入力するとアイコンがでますので、選択します。

step.3 コードをコピー

出てきたコードをコピーして、メモ帳などに貼り付けます。※少しカスタマイズします。

step.4 コードをカスタマイズ

デフォルトだとサイズ感が小さいので、大きくします。「fa-lg」がサイズ指定です。

aria-hidden="true"はあってもなくてもよいですが、残しておいた方が無難。サンプルでは、コードを短くするため消してます。

この他のカスタマイズは、こちらのサンプルページが参考になります。
Font Awesome - Examples

step.5 コードを貼り付け

カスタマイズしたコードを表示したい箇所に貼り付けます。

今回はホームアイコンなので、外観⇒メニューからヘッダーメニュー（グローバルナビ）を選択して貼り付けています。
※記事内に貼り付けてもOKです。

<a href="＠外部リンクURL" target="_blank" rel="nofollow">＠タイトル <i class="fa fa-external-link" aria-hidden="true"></i></a>

step.6 表示を確認する

適当なページを開いて、コードがアイコンになっているか確認しましょう。
上記のような感じになっていればOKです。

FontAwesomeでよく使うアイコン・コード一覧

ここでは、よく使いそうなアイコンたちをまとめています。
探すのが面倒な方向けです。

※必要に応じてサイズ調整してください。

まとめ：FontAwesomeでサイトをオシャレにデザインしよう

FontAwesomeでアイコンを表示するだけで、サイトがグッとオシャレになります。

同時にサイトの簡素なイメージをやわらげるも効果あり。

初心者でも簡単に導入できますので是非ご活用ください。

Font Awesome Icons
Font Awesome - Examples

関連記事AFFINGER5を使ってみた感想レビュー【他テーマとも比較】
関連記事Pinterestとは？登録方法・使い方・画像の作り方を全て解説