Webアイコンフォントを使用する
Date 2016.02.23 Category blog
最近のweb制作で、アイコンをWebアイコンフォントで作成する事が多くなってきたので使用方法をメモ。
Font Awesomeを使用してWebアイコンを表示する
Webアイコンフォントを使用するメリットとしては、画像を用意しなくて良い点と、
Retinaディスプレイ等に対応できるなど、メリットが多いので最近のwebサイトで頻繁に使用されています。
代表的なフリーのアイコンフォントサイトFont Awesomeを使用方法のご紹介
①ヘッダー内にFont AwesomeのCSSを読み込む
|
1 2 3 4 5 |
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> |
②HTMLに記述する場合
ますはサイトにアクセスしFont Awesome好きなフォントを選択！そしたら後はHTMLに記述！
|
1 |
<p><i class="fa fa-bolt"></i>サンダーアイコン</p> |
表示例：サンダーアイコン
③CSSで表示させる場合
before要素（擬似要素）にアイコンを指定するのがおすすめ！（afterでも良し）
|
1 2 3 4 5 |
a:before { content:'\f0e7'; font-family: FontAwesome; margin:0 5px 0 0; } |
表示例：サンダーアイコン
簡単に、無料で使えるのでこれは重宝しそうですね！
