FontAwesomeの使い方【メニュー項目前にアイコン設置】

ブログ初心者：「Webサイトのメニューバー項目の前にアイコンを設置したいんだけど、どうやって設定するの？」

こんな疑問を解決します。

本記事を読むメリット

FontAwesomeとは？

アイコンが取得できるWebサイト

FontAwesomeは、Webサイトで使えるアイコンのコードが取得できるサイトです。

いろんな人のブログを見てると、メニューバーのカテゴリー項目などの前にアイコンが設置されているおしゃれなサイトをよく見かけますよね。

当サイトでもFontAwesomeで取得したアイコンコードを使って、メニューバーにアイコンを設置しています。

取得できるアイコンの種類（無料アイコンあり）

FontAwesomeにはいろいろなアイコンがあり、自分が気に入ったコードをその場ですぐ取得することができます。

以下は、FontAwesomeで取得可能なアイコンの例です。

アイコンは、メニューバーの項目名のイメージに合ったをものがおすすめです。

大体のアイコンは、FontAwesomeの検索バーで調べればだいたい見つかります。

FontAwesomeでは、無料のアイコンと有料のアイコンがありますが、無料のものもたくさんあるのでお金をかける必要はありません。

アイコンをメニュー項目名の前に設置するメリット

このように、メニューバーの項目名の前にアイコンを設置するだけで、見やすくなるだけでなく、素人サイト感がなくなるのでおすすめです。

それではさっそく、FontAwesomeのアイコンコードを使って、メニューバーにアイコンを設置する方法を解説していきます。

メニューバー項目の前にFontAwesomeのアイコンを設置する方法は？

今回のアイコン設置の手順は、WordPressテーマ「AFFINGER5（アフィンガー５）」を使っている人向けの手順です。

JIN（ジン）などのほかのテーマを使っている人は、当記事の手順に入る前に、今回使用するプロジェクトのHTMLファイルのheadタグ内に下記コードを追記する必要があります。

ステップ１．FontAwesomeの公式HPでアイコンを検索する

まず、ここからFontAwesomeの公式HPにアクセスし、トップページ上部の【icons】ボタンをクリックします。

次に、検索欄から取得したいアイコンに関する名前を英語で入力します。

例）home、life、PC、cooking

今回は、サイトのトップページ（ホーム）用のアイコンを例として取り上げるため、「home」で検索し、実際にメニューバーにアイコンを設置するまでの流れを見ていきましょう。

ステップ２．FontAwesomeでアイコンコードを取得する

検索結果のアイコン一覧の中から使いたいアイコンをクリックします。

※はじめは、無料アイコンは白色、有料アイコンは薄いグレーで表示されています。
無料のアイコンのみを使いたい場合は、左サイドバーの【FREE】ボタンをクリックすると、無料アイコンだけが表示されます。

取得したいアイコンをクリックしたら、アイコン上部に下記のようなコードが表示されているので、コピーします。

ステップ３．アイコンのコードをWordPressのメニュー設定画面で入力する

次に、FontAwesomeでコピーしたアイコンコードをWordPressのメニュー設定画面で入力する作業をします。

まず、WodPress管理画面にログインし、ダッシュボードの【外観】→【メニュー】から「メニュー構造」の画面を開きます。

先ほどコピーしたアイコンコードを貼付けるのは、以下の「ナビゲーションラベル」です。

「メニュー構造」の画面（メニューに表示させる項目一覧）で、各項目名のはじめに先ほどFontAwesomeでコピーしたアイコンコードを貼付けます。

以下の画面がアイコンコードを貼付けた後の状況です。

※このとき、コード内の「fas」の「s」を消して「<i class="fa fa-home"></i>」とします（homeアイコンの例の場合）。このコード修正をしないとちゃんとアイコンがうまく表示されません。

↓（コード修正後）

最後に【メニューを保存】ボタンを押せば完了です。

これでメニューバーの項目名の横にアイコンが設置されているはずです。

おまけ【アイコンの大きさを変える方法】

アイコンの大きさのクラスは、「fa-lg(約1.33倍)」「fa-2x(2倍)」「fa-3x(3倍)」「fa-4x(4倍)」「fa-5x(5倍)」の5つがあります。

アイコンの大きさの変更は、アイコンコードの末尾にこれらのコードを追記するだけで簡単にできます。

メニューバーにFontAwesomeのアイコンがうまく表示されないときの対処法は？

有料アイコンのコードを使おうとしていないか確認する

有料会員になっていないのに有料アイコンのコードをコピペしている場合は、アイコンが「□（しかく）」マークで表示されます。
無料アイコンのコードを使えばアイコンがうまく表示されるはずです。

アイコンのコードを一部いじる

前述したように、コード内の「fas」の「s」を消して「<i class="fa fa-home"></i>」とします（homeアイコンの例の場合）。
このコード修正をしないとちゃんとアイコンが「□（しかく）」マークで表示され、ちゃんとアイコンが表示されません。

↓（コード修正後）

アイコンのコードが間違っていないか確認する

コピペしていればよっぽどコード間違いはないと思いますが、コードが１文字でも間違っているとアイコンは表示されません。