prasm prasmっていうブログだよ

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)で

2014-01-29_0240

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

2014-01-29_0240_001

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

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

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

次回の記事は
「2016年版フレッシュさんがYouTubeの投稿に使っている機材」
読みのがしなくッ!