FontAwesomeをCSSで記述

FontAwesomeとは　アイコンを無料で簡単に表示させられるツールです。

私のブログで言うとこちらの部分↓

FontAwesomeの登録が済んでない方は無料で登録できるのでしておいてください。また、記述するにあたりFontAwesomeを読み込まないといけないのでheadタグかfooterタグに以下のコードを記述しておいてください。読み込み速度の関係でfooterタグに記述する方が良いようです。

HTMLに記述する場合

通常、HTMLに記述する場合はFontAwesomeのサイトから好きなアイコンを探し、class属性に指定のコードを記述します。

しかし、PHPを用いて記述している場合、好きな場所に直接クラスをつけることができないと思います。ですので今回はCSSを編集して好きなところにFontAwesomeのアイコンをつける方法を書きます。

CSSに記述する場合

やり方は簡単で、デベロッパーツール を用いてアイコンを付けたいところを選択してその場所についているclass属性を調べます。

後はCSSで以下のコードを記述するだけです。

\f105は選んだアイコンのコードになります。

ちなみに「 \ 」はMacの場合【option】+【¥】で打てます。