WEB制作、マーケティングに関する情報をお届けします。

Font Awesomeの使い方。一行追加するだけでアイコンを画像を使わずに表示!

今更感はありますが今回はFont Awesomeの使い方等を紹介します。
レスポンシブデザインを構築していく上ではかなり有効な方法ですし、新たにアイコンを制作する必要も無いので制作の時短にもなります。
普及している物なのでチャチャッと使い方だけを解説しちゃいますね。

1.たった1行追加するだけ。

使い方は至って簡単でCDNサーバーにアクセスしてCSSを読み込ませるだけです。

コレでオッケーです。

2.表示する方法。

まずは、Font一覧にアクセスして使いたいアイコンを探します。
例としてよく使うHOMEボタンを選んでみます。

クリックすると下記のようなページに飛びます。

赤枠のfa-homeがアイコンのクラス名になります。
下記が実際に使用する際のコードです。

Home

【fa】のクラス名は必須ですので必ず、自分の使いたいクラス名と併せて書いてください。

3.アイコンを回転させる方法。

矢印等はよく回転させて使ったりしますがその際はrotateを使います。
下記がコードです。

回転無し

90度回転

180度回転

270度回転

4.大きさの指定について

Font Awesomeはあくまでフォントなので大きさはcssでfont-sizeを指定する事ができます。
ただ、クラスを付与する事でもサイズ指定が出来ます。
下記、コードです。

1.33倍

2倍

3倍

4倍

5倍

5.アイコンを複数重ねる

複数のアイコンを重ねる事で新たにアイコンを作る事が出来ます。
ツイッターのアイコンを作ってみましょう。
コードから見ていきます。

= fa-square + fa-twitter

ツイッターアイコンと角丸を重ねて見ました。

解説します。まず、親要素にfa-stackというクラス名を付けます。
角丸に【fa-stack-2x】というクラス名を付けてフォントサイズを2倍にします。
次に ツイッターマークに【fa-stack-1x】のクラス名を付けてフォントサイズを標準に指定します。
別途、ツイッターアイコンはcssで色指定をしますので【fa-white】と適当な名前を付けて下記のようにcssを適用させます。

※Wordpressなどでは自動でbrタグが付与されて重ならない場合があります。そのときはコードを一旦見直しましょう。