webフォント（Font Awesome）の使い方

ウェブサイトでアイコンを使いたいときに、画像ではなく、Webフォントを使って表現することって多くなりました。
手軽だし、サイズが変わっても荒くならないのもいいですよね。

いろいろなWebフォントサービスがありますが、Font Awesomeが一番有名でしょうか。

Font Awesome the iconic font and CSS toolkit

 

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;
}

font2

 

上記は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のユニコード、 [&#xf0a9;]の先頭の&#xを\に変更します。フォントファミリーにFontAwesomeを指定。

font1

 

アイコン・ユニコードの一覧は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";

 

css, Webサービスfont awesome, webフォント

Posted by 智次郎