Font Awesomeを使ってみよう！

ウェブサイトを制作している時によく使用するのが「アイコン」です。

小見出しのアクセントに、より分かりやすく見せるためのポイントに、

アイコンは何かと使います。

そんな時、自分でアイコンを作ってしまうのも良いですが、

時間短縮に、間単に自分のサイトにアイコンを組み込めるツールがあるんです！

それは、

「Font Awesome, the iconic font and CSS toolkit」！

使い方はいたって簡単です。

ダウンロードをして使用するのも良いのですが、

一番簡単なのは、headタグ内に、

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

上記コードを追記しましょう。

これだけですぐに使用できます。

では実際に使う時はどうするのか、というと、

まずは使いたいアイコンを見つけましょう。

「Icons」ページに行ってどんなアイコンがあるのか見て見ましょう。

アイコンページに行くと、様々なアイコンがあるので、

その中から使用するアイコンを選択、クリックします。

クリックすると、以下のページに飛ぶので、以下のタグをコピーします。

<i class="fa fa-chevron-circle-right"></i>

タグをコピーしたら、使いたいところにこのタグを挿入するだけです。

例えばこんな感じです。

<p><i class="fa fa-chevron-circle-right"></i>here!</p>

ここでは実際にFont Awesomeを設置していないので、

表示を確認することができませんが、

きちんと設置されていれば、これで矢印のアイコンが表示されているはずです。

矢印のアイコンなんかは特によく使用するので、

こういったツールを使用して、時間短縮するのも良い手ですよね。

手軽にお洒落なアイコンを使用することができますし、439個ものアイコンがFont Awesomeには存在するので、是非チェックしてみて下さいね♪