ウェブサイトでアイコンを使いたいときに、画像ではなく、Webフォントを使って表現することって多くなりました。
手軽だし、サイズが変わっても荒くならないのもいいですよね。
いろいろなWebフォントサービスがありますが、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を指定。
アイコン・CSS・ユニコードの一覧はチートシートが用意されています。
Font Awesome 4 cheatsheet
Font Awesome v5 は公式サイトではリリースされていないようでコロラド大学からダウンロードできます。
Font Awesome 5 Free's Cheatsheet （PDFが直接開きます）
使い方サンプルはこちらから
読み込みを少なくしたいときには、必要なファイルだけインポートするファイルという手も。
@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";