CSSで簡単にアイコン作成！CDNのWebフォント「Font Aesome」

デザイナーさんにとって、アイコンの一つひとつも作品であり、こだわりたい部分・・・ではあるものの、作る時間がないから今回はフリー素材で・・・ということもあるかと思います。また、ノンデザイナーさんにとっては、アイコン素材を探したり、サイズや色を加工したり、という作業も時間がかかり、煩わしいものではないでしょうか。
そこで今回は、CDNのWebフォントを使って、手間無くCSSで簡単にアイコンを作る方法をご紹介します。

豊富なアイコン素材をWebフォントとして使える「FONT AWESOME」を使います。
http://fortawesome.github.io/Font-Awesome/

上部メニューのiconsから、使用できるアイコンフォントの一覧が確認できます。
2014年9月の時点で、フォントの数は479個。
今後も増え続けるようです。

メリットは、
・ダウンロードの必要がない
・画像編集ソフトがいらない
・サイズ、色はCSSで簡単に変更できる
・テキストとの位置合わせもバッチリ
などなど。
とにかく簡単で便利なので、忙しい時に備え、いつでも取り出せるように準備しておきたい技です。
それでは、使い方です。

１.cssを読み込む

内でCSSを読み込みます。

[HTML]


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

２.HTMLを書く

フォントを表示させるためのclass=”fa”に加え、フォントの種類に応じたclassを使います。

[HTML]音楽
ひとまずこれだけで、アイコンフォントは表示されます！

「デモを確認する」

アイコンフォントの一覧ページに、それぞれのclass名が書かれているので参考になります。

http://fortawesome.github.io/Font-Awesome/icons/

３.サイズ変更

fa-lg、fa-2x、fa-3x、fa-4x、fa-5xの、５つの大きさが用意されています。
もちろん、CSSで別のクラスを作ってもOKです。

[HTML]


<i class="fa fa-music fa-3x"></i>音楽

「デモを確認する」

４.ボーダーを付ける

fa-borderで、アイコンフォントの周りにボーダーを付けることができます。

「デモを確認する」

[HTML]


<i class="fa fa-pencil fa-3x fa-border"></i>

５.色や形の変更

自分でCSSを追加し、好きな色や形に変更するのも簡単です。


.sample01{ 	
color:#ffffff; 	
background-color:#6C9;
 }

[HTML]


<i class="fa fa-pencil fa-3x fa-border sample01"></i>

「デモを確認する」

６.自由に組み合わせる

上記の方法でも四角や丸のアイコンを作ることはできますが、２つのフォントを組み合わせて作ることもできます。
親要素にfa-stackクラスを付与し、子要素に組み合わせたい２種類のフォントを記述します。
例はそれぞれ、四角の上にTwitterのマークを、丸の上にFacebookのマークを、禁止マークの上にカメラを組み合わせたものです。

[CSS]


.sample02 .fa-square{ color:#00acdd; } 
.sample03 .fa-circle{ color:#3c5a98; } 
.sample04 .text-danger{	color:#900; }

[HTML]


<span class="fa-stack fa-lg sample02">  
<i class="fa fa-square fa-stack-2x"></i> 
<i class="fa fa-twitter fa-stack-1x"></i> 
</span> 
<span class="fa-stack fa-lg sample03">   
<i class="fa fa-circle fa-stack-2x"></i>   
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
 </span> <span class="fa-stack fa-lg sample04">   
<i class="fa fa-camera fa-stack-1x"></i>   
<i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span>

「デモを確認する」

７.回転させる

fa-spinをclassに付けるだけで、くるくると回るローディング用アイコンになります。


<i class="fa fa-spinner fa-2x fa-spin"></i>

「デモを確認する」

この他にも、角度を変えたり、複数行のテキストを回り込ませたり、リストをキレイに揃えたりと、便利なclassが最初から用意されています。
抜群に使いやすいCDNのアイコンフォントをぜひ、試してみてください。

WEBデザイン, 便利なサイトの紹介