”シンプル”なデザインを、”フツー”のWEBサイトを

【初心者必見】WEBフォントFont Awesomeの使い方

WEBフォントつかっていますか?最近では様々なWEBフォントが出てきて、シンプルなものであれば、サイトのロゴなんかも割りと自由に表現出来ます。
特にちょっとしたアクセントにつかうアイコンは便利で、僕もよくつかっています。大きさも色もCSSだけで自由に変更できますし。昔はこういう部分もちまちまと画像で作っていたものですが。良い時代です。

で、今日は数あるWEBフォントのサービスの中でも特に有名なFont Awesomeの使い方です。矢印やチェックマークなどのベーシックなものから、SNSのアイコンも揃っているので非常に使い勝手が良いです。

<head>部分でcssを読み込む

まずは<head>内でFontAwesomeをつかうためのCSSを読み込みます。
下記サイトからフォントファイルなど一式ダウンロード出来ます。

ただ、僕はフォルダをそれぞれの場所に突っ込んで、パスを変えて、とかが面倒なので、bootstrapのCDNから読み込んでいます。

その場合は下記を<head>内に記述してください。

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

準備はこれだけです。

Font Awesomeのサイトでアイコンを探す

まずFont Awesomeのサイトから使いたいアイコンを探します。ナビゲーションにある「Icons」からつかえるアイコンの一覧ページへ飛べます。

実装方法

目的のアイコンを見つけたら、クリックします。あとは下の画像の赤枠で囲った部分をアイコンを表示させたい場所にコピペすればOKです。

:beforeのcontentでつかいたい場合

ここまでは、まあ何を今さらな話なのですが、意外と知られていない(というかわかりづらい)のがUnicodeでの指定方法。
例えば、<li>タグの前に自動でアイコンを表示するようにしたい場合、CSSは擬似クラスをつかって、

ul li:before{
content:"~";
}

という書き方をすると思います。

ただ、このときにWEBフォントのアイコンを使いたいとなると、擬似クラスのcontentプロパティにHTMLはつかえないので、上の<i class="~"></i>を記述するわけにはいきません。そこで必要なのがUnicodeになります。

かなり見づらいのですが、下の画像の赤枠で囲った部分にアイコンのUnicodeが書かれているので、これをつかいます。

上記の場合Unicodeはf2b9になるので、擬似クラスのcontentプロパティでWEBフォントを指定するときのCSSは下記のようになります。

ul li:before{
content:"\f2b9";
font-family: FontAwesome;
}

なお、Unicodeの前に\とありますが、これはUnicodeを書くときのルールろされています。また、環境によって「\」になったり、「¥」になったりします。