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

無料でCDNで使えるアイコン WEBフォント Font Awesome の使い方
このエントリーをはてなブックマークに追加
PR

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でフォントサイズ・色等々を操作できます

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)