Webページで画像を用意することなく簡単にアイコンを表示できるサービス Font Awesome。
使い方は簡単だけど、表示される仕組みがイマイチわかってなかったので調べました。
Font Awesomeとは
Webページで画像を自分で用意しなくても簡単にアイコンを表示できるサービスです。
たとえばこんな感じ↓でアイコンを文字のように表示できるので、大きくしても輪郭がぼやけないし、色も自由に変えられます。
有料のアイコンもありますが、無料で十分使えます。
Font Awesomeの使い方
使い方は簡単です。
- headでWeb上のCSSファイルを読み込む
- 公式ページで使いたいアイコンのコードをコピー
- 使いたい箇所に貼り付ける
1. headでWeb上のCSSファイルを読み込む
Font Awesomeの公式サイトで 以下の場所にあるコードをコピーして <head>~</head> 内に貼り付けます。
2. アイコンのコードを調べる
公式サイトのアイコンのあるページで使用したいアイコンを選んでクリックします。
アイコンのコードをコピーして 使いたい場所で貼り付けると そのアイコンが表示されます。
アイコンが表示される仕組み
Webフォントって何？
フォントはユーザのPC内に入っているデータを呼び出して使うので、例えば Windowsに標準で入ってる「メイリオ」は Macには 入っていないので表示できません。
そこでフォントのデータを Web上にあるデータを使うようにすれば ユーザの環境によらず常に同じフォントを使うことができます。
これがWebフォントです。
普通のフォントデータには「あ」のようなデザイン（文字）が入っているところに Font Awesomeには「」のようなデザイン（アイコン）が入っているフォントデータなので、アイコンが表示されるというわけです。
CSSファイルの内容
head に貼り付けた linkタグの URLをコピーしてブラウザのアドレスバーに入れると、CSSファイルの中身が見れます。
が、全て 1行で書かれていて見にくいので、全部コピーしてテキストエディタに貼り付け、「}」の後ろで改行して整理してみましょう。
フォントデータの読み込み
CSSの中で こんな感じでフォントデータを読み込んでます。
CSS
@font-face{
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:900;
src:url(../webfonts/fa-solid-900.eot);
src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
url(../webfonts/fa-solid-900.woff2) format("woff2"),
url(../webfonts/fa-solid-900.woff) format("woff"),
url(../webfonts/fa-solid-900.ttf) format("truetype"),
url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")
}
アイコンを表示させる部分
アイコンを表示させるタグは下のようになっていて、クラスをふたつ使ってます。
これをひとつずつ見ていきます。
HTML
<i class="fasfa-home"></i>
最初に “fa-home“クラス。
CSS
.fa-home:before { content: "\f015" }
擬似要素を使って ユニコード（ここでは \f015）を指定してアイコンを表示していることがわかります。
次に”fas“クラス。
CSS
.fas{ font-weight: 900 }font-weight が指定されてますね。
Font Awesome は同じアイコンでも Solid、Regular、Light で線の太さが選択できます。
（Regular と Light は有料ですが…）
Solid、Regular、Light を それぞれ fas、far、falクラスで 使いわけます。
これとは別に Twitterなどのブランドアイコンは fab クラスを使います。
クラスと font-weight をまとめた表を貼っておきます。
クラスを自作して使おう
フォントサイズを変えたり、色を変えたりするクラスとかも公式で用意されてますが、この辺は自分でクラスを作った方が色々応用が効くのでサンプルのせときます。
スタイルだけ別で指定するパターン↓
HTML
<i class="fas fa-home myclass1"></i>
CSS
.myclass1 {
color: #5FAFD7;
font-size: 2em;
}
クラスをひとつにまとめるパターン↓
HTML
<i class="myclass2"></i>
CSS
.myclass2:before {
font-family: "Font Awesome 5 Free";
content: "\f015";
font-weight: 900;
color: #5FAFD7;
font-size: 2em;
}
