初心者でも簡単!head要素内に1行追記するだけでアイコンフォントが使える「Font Awesome」

通常「アイコンフォント」を使うにはアイコンをサーバーにアップロードする必要があったり初心者には手が出しづらいんですよね
今回紹介する「Font Awesome」はFTPを使用することなくheader.phpに1行追記するだけでアイコンフォントが使えるようになる初心者にはうれしいツールです。

sponsored link

head要素内に1行追記する

まず「Font Awesome」を使うためにheader.phpのhead要素内に下記のようにコードを追記します。

4行目でFont Awesomeを読み込みます(head要素内ならどこでもOKです)。使用できるアイコンフォントは常に最新のものになります。

i要素を記述してアイコンフォントを使う

上記のリンクからFont Awesomeにアクセスしてアイコンフォントを使っていきましょう。

アイコンフォントはナビゲーションメニューから[Font Awesome Icons ]を選択します。
アイコンを選択する
ずらーっとアイコンが並ぶので⌘+Fなどでページ内検索すると探しやすいです。見つけたらクリックしましょう。

iタグを使った書き方が書かれていますので、これをそのまま記述してみます。
i要素を使った記述方法

fa-twitter fa-twitter

Twitterのアイコンが表示されました。アイコンのサイズを大きくするにはfa-2xのclassを半角スペースを空けて追加します。(fa-5xまであります)

classで指定しているのでCSSも付けられます。

:before疑似要素を使ってCSSからアイコンを指定する

i要素ではfa-twitterのように直接指定しているので、修正したい時に不便です。一括で修正・変更できるように疑似要素を使ってアイコンを指定するようにしてみます。

HTMLとCSSはこのようにします。

ツイッターのアイコン

疑似要素を使う場合はサイズもCSSから指定することができます。

アイコンのコード(content)はiタグの例が書いてあったページにUnicode:f081という箇所がありますので、その値を指定します。
コードを取得する


アイコンフォントは解像度に依存しないのでRetinaディスプレイでもきれいに表示されますし、CSSを使えば色々とカスタマイズできます。簡単にできるのでぜひチャレンジしてみてください。