FontAwesomeとは、ウェブアイコンフォントを提供しているサービスです。
↑の「」もFontAwesomeです。
Worspressテーマ「Simplicity」では、何もしなくてもFontAwesomeを使えるようになっています。
今回は、FontAwesomeを使って記事を装飾する方法と、Simplicityで使われているFontAwesomeのアイコンを変更する方法について説明します。
FontAwesome（アイコンフォント）とは
FontAwesome（ウェブアイコンフォント）とは、「ヒラギノ明朝」や「游ゴシック」、「メイリオ」のように、フォントとして使うことのできるアイコンです。
画像ではなくフォントなので、フォントサイズを大きくすれば、きれいに大きく表示されるし、フォントカラーを設定すれば色を付けることも出来ます。
SimplicityでFontAwesomeを使うには
FontAwesomeを自分のブログに導入する方法はいくつもあるのですが、Simplicityでは、自分で導入しなくても、最初から使えるようになっています。
Simplicityのテーマ内でも使われています。
例えば、記事の「投稿日」、「カテゴリ」を示すアイコン。
これもFontAwesomeです。
このように、FontAwesomeはテーマ内のアイコンとしてよく利用されているのですが、実は、記事の中でも使うことができます。
FontAwesomeを使って記事を装飾する方法
にアクセスします。
このページで、アイコンの一覧を見ることが出来ます。
「Search icons」で検索もできます。
検索すると、結果が表示されます。
今回は、この中から「thumb-tack(pin)」を選択します。
「thumb-tack(pin)」のページが表示されます。
このページに書いてあるHTMLコードを記事内に貼り付けると、アイコンを表示することができます。
このコードは、通常はテキストエディタに記入しなければいけませんが、Simplicityでは、ビジュアルエディタに「Insert HTML」ボタンが用意されているので、簡単に挿入することが出来ます。
ピン「」
↑コードを挿入すると、このように表示されます。
通常の文字と同じように、色やサイズを変えることもできます。
ピン（24px）「」
Simplicityで使われているFontAwesomeのアイコンを変更する方法
続いて、テーマ内で使われているアイコンを変更する方法です。
記事の「投稿日」、「カテゴリ」を示すアイコンなどです。
他にも、ビジュアルエディタで利用できる「補足情報（i）,（?）,（!）」や、「SNSシェアボタン」、「トップへ戻るボタンのアイコン」、（モバイルの）「メニューボタンのアイコン」などにもFontAwesomeが使われています。
▼「メニューボタンのアイコン」
▼「トップへ戻るボタンのアイコン」
▼「SNSシェアボタン」
▼「補足情報（!）」
「トップへ戻るボタンのアイコン」、「メニューボタンのアイコン」については、テーマカスタマイザーから変更できるようになっています。
「トップへ戻るボタンのアイコン」、「メニューボタンのアイコン」を変更する
Wordpress管理画面左画の「外観」→「カスタマイズ」からテーマカスマイザーを開き、左側のメニューにある、「レイアウト（全体・リスト）」を選択します。
下の方にある、「メニューボタンのアイコン（デフォルト：fa-bars）」という部分で、「メニューボタンのアイコン」を変更することができます。
変更するには、「fa-bars」と書いてある入力欄に、任意のFontAwesomeのアイコンのクラス名を記入します。
同様に、「トップへ戻るボタンのアイコン（デフォルト：fa-angle-double-up）」という部分で、「トップへ戻るボタンのアイコン」を変更することができます。
詳しい説明は、Simpliciyの公式サイトを参照して下さい。
それ以外の、テーマ内アイコンを変更する
記事の「投稿日」、「カテゴリ」や、「補足情報（i）,（?）,（!）」、「SNSシェアボタン」など、テーマカスタマイザーからは変更することの出来ないアイコンの変更方法です。
テーマ内で使われているアイコンは、テーマファイル（PHPファイル）内で、FontAwesomeのアイコンのクラスが指定されています。
なので、テーマファイル（PHPファイル）の該当の箇所を、別のFontAwesomeのアイコンのクラスに書き換えることで、変更することが出来ます。
また、テーマファイル（PHPファイル）を編集したくない場合は、CSSを編集して、直接Unicodeを指定する方法もあります。
例えば、記事の「投稿日」は「fa fa-clock-o fa-fw」というクラス名が指定されているので、（）が表示されています。
FontAwesomeのCSSで、「fa fa-clock-o fa-fw」の「before要素」に、（）のUnicodeが指定されています（Unicodeの調べ方は、次の項目で説明します）。
「」のUnicodeは「f017」です。
これを、子テーマのCSSで上書きすることにより、別のアイコンを表示させることが出来ます。
「f133」と書くと、「」が表示されます。
.fa-clock-o:before {
content: "\f133";
}ただし、クラス名を変更せず、CSSを編集して表示させるアイコンを変更すると、クラス名が「fa fa-clock-o（）」なのに、表示アイコンが「fa fa-calendar-o（）」になるという、若干スッキリしない感じになります。
FontAwesomeのアイコンのUnicodeを調べる方法
にアクセスします。
先ほどの、ピンのページで説明します。
「fa-thumb-tack」と、アイコンの名前が書かれているところの隣に、小さく「Unicode: f08d」と書いてあります。
これが、このアイコンのUnicodeです。
「補足情報（i）,（?）,（!）」のアイコンを変更する
「補足情報（i）,（?）,（!）」は、FontAwesomeのクラスではなく、Simplicityオリジナルのクラス名を使っています。
これらは、各クラスの「before要素」に、「（f05a）」、「（f059）」、「（f06a）」というUnicodeが指定されています。
なので、子テーマのCSSでこの部分を変更すると、別のアイコンを表示させることが出来ます。
僕は色を変更して使っています。
変更例
.question::before {
content: '\f29c';
}
.alert::before {
content: '\f071';
}さいごに
FontAwesomeは可愛くて使いやすいので、このブログでも、記事内でよく使っています。
僕は、Simplicityの「補足情報」ボックスが使いやすくて気に入っているので、これらを参考にしてオリジナルのボックスを作って使っています。
など。これらのボックスの作り方は、また別の機会に説明します。
→ボックスデザインについてはこちらの記事（コピペでできるボックスデザインサンプルとビジュアルエディタへのボタン追加方法（CSS））で紹介しています。
Comments