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>内に記述するだけでも使えます。

ファイルをダウンロードして使う場合は、
ダウンロードしたフォルダの中にあるcssとfontsフォルダを自分のサイトにアップロード。

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

よく使いそうなリスト要素で使う場合

fa-ul,fa-li を加えると、アイコンとテキストの幅を持たせてくれます。

font2

 

上記はhtml に i要素を記述することになりますが、htmlには余計なタグを入れたくない場合は、contentプロパティでもいけます。

fa-arrow-circle-rightのユニコード、 [&#xf0a9;]の先頭の&#xを\に変更します。フォントファミリーにFontAwesomeを指定。

font1

 

アイコン・ユニコードの一覧はfont awesome チートシートで
http://fortawesome.github.io/Font-Awesome/cheatsheet/

使い方サンプルはこちらから
http://fortawesome.github.io/Font-Awesome/examples/

 

 

読み込みを少なくしたいときには、必要なファイルだけインポートするファイルという手も。

 

SNSでもご購読できます。