くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[その他]Webアイコンフォント「Font Awesome」

.htaccessを使用したスマートフォン対応サイトで使ったwebアイコンフォントの使用方法について。

fortawesome.github.io

1.CDNを利用する場合

内に以下のCDNのリンクを埋め込む(現在の最新バージョンの場合)

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
2.「ICONS」の中から使いたいフォントを見つけ、クリック
3.アイコンをクリックして出てくるページのクラス名に注目

f:id:pleasure10501:20150708182131p:plain

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

4.表示したいところにそのまま挿入する

クラス名を指定すれば、CSSで色々な指定ができる


こちらも参考になります
これは便利!アイコン型WebフォントのCDN「Font Awesome」|Webpark