webフォント(Font Awesome)の使い方
ウェブサイトでアイコンを使いたいときに、画像ではなく、Webフォントを使って表現することって多くなりました。
手軽だし、サイズが変わっても荒くならないのもいいですよね。
いろいろなWebフォントサービスがありますが、Font Awesomeが一番有名でしょうか。
Font Awesome
https://fortawesome.github.io/Font-Awesome/
種類も多いし、導入し易いこともあり時々使います。
使いかた簡単に。
CDNでも提供されているので、ダウンロードせずに<head></head>内に記述するだけでも使えます。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
ファイルをダウンロードして使う場合は、
ダウンロードしたフォルダの中にあるcssとfontsフォルダを自分のサイトにアップロード。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
fontsフォルダの場所を変えた場合は、font-awesome.min.css内の
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
を変更する必要あり。
※Sass,LESS用のファイルも用意されています。
基本的な使い方
fa + fa-○○○
<i class="fa fa-camera-retro"></i> fa-camera-retro
サイズを大きくしたい場合は
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
よく使いそうなリスト要素で使う場合
<ul class="fa-ul"> <li><i class="fa-li fa fa-arrow-circle-right"></i>みかん</li> <li><i class="fa-li fa fa-arrow-circle-right"></i>りんご</li> <li><i class="fa-li fa fa-arrow-circle-right"></i>いちご</li> <li><i class="fa-li fa fa-arrow-circle-right"></i>バナナ</li> </ul>
fa-ul,fa-li を加えると、アイコンとテキストの幅を持たせてくれます。
.fa-ul { padding-left: 0; margin-left: 2.14286em; list-style-type: none; } .fa-li { position: absolute; left: -2.14286em; width: 2.14286em; top: 0.14286em; text-align: center; }
上記はhtml に i要素を記述することになりますが、htmlには余計なタグを入れたくない場合は、contentプロパティでもいけます。
<div class="demo1"> <ul> <li>みかん</li> <li>りんご</li> <li>いちご</li> <li>バナナ</li> </ul> </div>
.demo1 li{ margin:0 0 0 10px; padding:0; } .demo1 li:before{ content: "\f0a9"; font-family: FontAwesome; }
fa-arrow-circle-rightのユニコード、 []の先頭の&#xを\に変更します。フォントファミリーにFontAwesomeを指定。
アイコン・ユニコードの一覧はfont awesome チートシートで
http://fortawesome.github.io/Font-Awesome/cheatsheet/
使い方サンプルはこちらから
http://fortawesome.github.io/Font-Awesome/examples/
読み込みを少なくしたいときには、必要なファイルだけインポートするファイルという手も。
@import "fa/variables"; @import "fa/mixins"; @import "fa/path"; @import "fa/core"; @import "fa/larger"; //@import "fa/fixed-width"; @import "fa/list"; //@import "fa/bordered-pulled"; //@import "fa/animated"; //@import "fa/rotated-flipped"; @import "fa/stacked"; @import "fa/icons";