BLOG
アイコンWebフォント「Font Awesome」
2016/1/17
Font AwesomeとはアイコンをWebフォントとして利用できるようにしたものです。フォントとして利用できるため、サイズや色などCSSで調整して利用することができます。
拡大・縮小が綺麗で、アニメーションさせることもできます。
なによりサイトの運用も楽です。
公式サイト
https://fortawesome.github.io/Font-Awesome/
準備
簡単に使うにはCDNサーバのファイルを読み込みます。
|
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> |
もちろんファイルを自サイトに配置して使用することも可能です。
アイコン表示方法
使用できるアイコン一覧はこちら
https://fortawesome.github.io/Font-Awesome/icons/
下記のようにclassをつけるとアイコンが表示されます。詳しくはアイコン一覧を確認ください。
|
1 2 3 4 5 |
<span class="fa fa-facebook"></span> <span class="fa fa-twitter"></span> <span class="fa fa-instagram"></span> <span class="fa fa-github"></span> <span class="fa fa-vimeo"></span> |
またcontentプロパティでも指定できます。
デメリットとしてWebフォントなので表示に時間がかかったりとか古いブラウザが非対応等ともあると思いますが一度試してみて下さい。
さっそく私もこのサイトのSNSアイコンに使ってみました！！