一昔前は、ナビゲーションやリストマークなどに「シンボルマーク+テキスト」を表示したい場合、「png画像」を背景画像に指定するなどして対応することもありましたが、フラットデザインが流行してからは「Webフォント」を上手に活用してページ自体の高速化やイメージの統一をしているWebサイトが多く見受けられます。
その代表例として、アイコンを自由に配置したい方が利用しているものに「Font Awesome（2016年10月現在/Version 4.6.3）」があります。Font Awesomeは、様々なアイコンをWebフォントとして利用できるように提供されていて、無料で使えるWebフォントとされていますので、喜んで利用させてもらっています。
イマイチ使い方がよくわからなくて触ったことない・・・。
そもそも“ Font Awesome ”ってなに？
という方のために、実際の使い方を手順を追ってご紹介させていただきます。
ダウンロードして利用 or CDNで利用
Font Awesomeの利用方法は2つあり、ファイルをダウンロードして利用するか、CDNで利用するかがあります。まずは、どちらの方法で利用するかを選択します。
CDNで利用する場合
CDNで利用する場合は、Font Awesomeのトップページからご自身の「E-mail」を入力し送信します。すると入力したE-mailアドレス宛に「Your new Font Awesome CDN embed code」というタイトルで返信が送られてきます。本文に「Font Awesome CDN embed code!」として「Javascript」を読み込むコードが記載されていますので、そのままコピーしてHTML文書の<head>要素内にペーストしましょう。
▼メール本文
JavaScriptコードを読み込む
▼下記コードを<head>要素内に記述します。
|
1 |
<script src="https://use.fontawesome.com/送られてきた文字列.js"></script> |
ファイルをダウンロードして利用する場合
Font Awesomeサイトのトップページの「Download」ボタンから、ファイルをダウンロードしてください。
ダウンロードした「zipファイル」を解凍してみると、下図のようなフォルダが格納されていることを確認します。
「cssフォルダ」の中身を開いてみると、
ふたつのファイルがありますが、特に理由がなければ圧縮された方の「font-awesome.min.css」を利用します。<head>要素内で読み込みましょう。
|
1 |
<link href="css/font-awesome.min.css" rel="stylesheet"> |
「fonts」フォルダは、デフォルトで使用する場合「cssフォルダ」と同じ階層にする必要がありますが、別の階層に配置したい場合は、「font-awesome.min.css」内の記述を変更する必要があります。
例えば、「font-awesome.min.css」は「css」フォルダに配置し、「fonts」フォルダはトップの階層に配置したい場合は、「font-awesome.min.css」内の「@font-face」の記述を下記のように修正しておきましょう。
|
1 2 3 4 5 6 7 |
@font-face { font-family: 'FontAwesome'; src: url('../../fonts/fontawesome-webfont.eot?v=4.6.3'); src: url('../../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } |
src: url(‘../fonts/fontawesome-webfont.eot?v=4.6.3’);
となっている部分を、
src: url(‘../../fonts/fontawesome-webfont.eot?v=4.6.3′);
以下、../fonts/となっている箇所も併せて../../fonts/に書き換えてください。ふたつ上の階層に指定すればOKです。
※IE7にも対応する場合はここもチェック！
Font Awesome のWebフォントでは、「:before（疑似要素）」を利用してアイコンを表示する仕様になっていますので、残念ながらIE7以下には対応されていません・・・。そこでどうしてもIE7でもきちんと表示されるようにしたい場合は、古いバージョンのFont Awesomeを利用するしかないのが条件になっています。よって、Font Awesome/Version 3.2.1を改めてダウンロードし併せて「font-awesome-ie7.min.css」も指定する必要があります。
<head>要素内で読み込むCSSの記述を、以下のように変更しましょう。
|
1 2 |
<link href="css/font-awesome.min.css" rel="stylesheet"> <link href="css/font-awesome-ie7.min.css" rel="stylesheet"> |
利用できるアイコンフォントを確認
実際に利用できるアイコンフォントを確認していきたいと思います。全てのアイコンフォントのコードを暗記する必要はなく、利用したいときにその都度確認すればよいと思います。場所は「Icons」から確認することができます。
Icons一覧ページへ
利用するアイコンを選択
例えば「タグ」マークを利用しようとした場合、下図の「tags」をクリックします。
HTMLソースを確認
「tags」をクリックすると、実際のアイコンフォントの表示イメージや利用方法が記載されたページに移動します。
|
1 |
<i class="fa fa-tags" aria-hidden="true"></i> |
<i>要素の中に、「fa」と「fa-tags」をクラス指定することでアイコンフォントは表示されるようになっていて、「fa-tags」の部分がアイコンの種類によってそれぞれ違うクラス名になっています。
アイコンフォントを表示してみる
それでは早速、「tags」を表示してみましょう。<body>要素内に先ほどのコードを記載してみます。
|
1 |
<p><i class="fa fa-tags" aria-hidden="true"></i>Font Awesome:tags</p> |
すると以下のように「Font Awesome:tags」の前に「タグマーク」が表示されるようになります。
アイコンフォントとテキストの隙間が狭くなってしまっていますが、ひとまず表示されているのが確認できていればOKです。デフォルトでは<i>要素を利用してクラス名を指定していましたが、<p>要素や<li>要素など他のタグを利用しても問題なく表示されます。
デフォルトのスタイルを確認してみる
「class=”fa fa-tags”」というクラス指定によって「タグマーク」は表示されましたが、CSS内ではどのような指定がされているのか確認しておきたいと思います。
.faのスタイル
|
1 2 3 4 5 6 7 8 |
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } |
「.fa」は、Font Awesomeにおいて基本設定になります。
.fa-tagsのスタイル
|
1 2 3 |
.fa-tags:before { content: "\f02c"; } |
「.fa-tags」は、:before（疑似要素）が設定されておりcontentプロパティによるアイコンフォントのユニコードが指定がされています。
ここまでが導入するまでの基本設定の内容になっています。サイズ調整やその他の設定は次回細かく見ていきたいと思います。