無料でCDNで使えるアイコン WEBフォント Font Awesome の使い方

Tweet

239

TwitterやFacebook等のSNSのアイコンもあるWEBフォントFont Awesome
無料でCDNで利用出来ます、ダンロードして利用することも可能です

WEBフォントでアイコンが使えると、サイズ、カラー、シャドウ等がCSSでコントロール出来ます
画像編集ソフトで作る手間が無くなります

Font Awesome のCDN WEBフォントの使い方

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

まずHTMLのheadに1コード追加します

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

このコードで、WEBフォントを呼び出しています

表示させたいところに<i>タグを入れる

 <i class="fa fa-bars"></i>

このタグに付いたクラス名でアイコンが呼び出されます、アイコン名はFont Awesomeの一覧から探せます
http://fortawesome.github.io/Font-Awesome/icons/

これで一応アイコンの表示ができました、あとは文字と同じように扱ってCSSでフォントサイズ・色等々を操作できます

Tweet

短縮URL:

2014年01月30日 WEB制作系 アイコンフォント font