head内にコードを一行書き足すだけで潤沢なアイコンフォントがすぐ使える「Font Awesome」が便利

アイコンフォント、便利です。

自分でいちいちアイコンを書く必要がなくなるし、レティーナや高解像度のディスプレイでも表示が汚くならないし、アイコンフォント、便利です。

まだアイコンフォントを使ったことのない方は、導入面倒なんじゃないの？とお考えかもしれませんが、意外に簡単です。

簡単って言うか、一行です。

嘘だと思ったら、ここから先の記事をどうぞ。

使い勝手のいいアイコンフォント「Font Awesome」

とにかく導入は手軽です。

Get Started with Font Awesome

＜head＞＜/head＞内に一行コードを書き足します。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

必要なスタイルシートを外部から読み込むだけです。

メリット。
ダウンロードとかいらない。ネットがあれば即実装。

デメリット。
まあ、ネット接続がないと表示されない。

こういう感じです。

googleのホストするCDN版のjQueryみたいなノリですかね？違いますかね？

ヘッダーにコードを読み込めば、あとは使いたい場所で

<i class="fa fa-twitter"></i> Twitterのアイコン！

Twitterのアイコン！

呼び込めば、すぐに使えるこの手軽さよ！

具体的には、アイコン一覧ページ（Font Awesome Icons）で

使いたいアイコンをクリック。

載せるコードが書いてます。

使えるアイコンの多さに、胸がときめきます。

Font Awesome Icons

CSSの疑似要素で制御したい場合

iタグ（－HTML5タグリファレンス）を使ってアイコンフォントを呼び込もうと思ったら、htmlを弄らないといけないのですが、CSSだけで制御したい人もいるでしょうね。

疑似要素で制御すればCSSだけでOK。

.class:before {
    font-family: 'FontAwesome';
    content:"\f013";/* 使いたいアイコンのコード */
    margin-right :3px;/* アイコンと要素の空きを調整 */
    }

WordPressのメニュー等動的にHTMLが書かれてしまう場合でも、CSSで制御すればアイコンフォントを使うことが出来ますね。

nav {
    li {
        &.menu-item-1111:before {
            font-family: 'FontAwesome';
            content:"\f013";//使いたいアイコンのコード      
        }
    }
}

CSSで制御出来るので、色や大きさもお好みで

アイコンフォントなので、CSSで色を変えたり、大きさを変えたり、好きな場所に描画できて便利。

LESSやSassにも対応

もちろん、大丈夫やで。

Get Started with Font Awesome

どこからでもサクッと呼び出せて、ありがたい。

まとめ

いかがでしたでしょうか？

使えるアイコンが多すぎて、むしろ選ぶのが大変という嬉しい悲鳴をあげてしまう私です。

今までは

CONDENSE-iconFont

↑コチラをありがたく使わせていただいていたんですけど、この際乗り換えですね。

「Font Awesome, the iconic font designed for Bootstrap」ほどいらない（読み込みが重い）という人は

IcoMoon : 好きなアイコンをピックアップしてWebフォントにできるサービス – K’conf

好きなの選んだり、自分で作ったりできる奴をどうぞ。

とりあえずアイコンフォント使ってみたい！という初心者さんから、面倒なことをすべて省きたいものぐささん（僕）まで、幅広くオススメです。

参考：Font Awesome, the iconic font designed for Bootstrap

文：シンタロヲフレッシュ

はてブ

pocket

twitter