ちょー簡単！Webフォントでアイコンが表示できる「Font Awesome 5」を使ってリッチなウェブサイトを作る！

色々なアイコンを表示できる「Font Awesome 5」を使ってリッチなウェブサイトを作ってみましょう！

以前にFont Awesomeの記事を書いていますが、この記事は色々と新しくなった「5」のバージョンとなります。

「5」より以前のバージョンを使うときは下記を参考にしてください。

STROBOLIGHTS.tokyo ＜ストロボライツ＞

デザインのアクセントに。Font Awesomeを使ってアイコンフォントを表示させる方法

https://www.strobolights.tokyo/2017/09/20/225/

この記事はバージョン5以下の内容になります。Font Awesome 5を使う場合は下記の記事を参考にしてくださ...

ページコンテンツ

1 で、Font Awesomeってなあに？
2 準備は簡単！CDNからCSSを読み込む
3 設置したいアイコンを選ぶ
4 CSSで:beforeや:afterに設置する
5 HTMLに直接設置する
6 SVGで設置する

で、Font Awesomeってなあに？

Font Awesomeはウェブフォントを利用して様々なアイコンを使うことができるサービスです。
画像を作る必要も無ければデータをローカルに保存する必要も無く、CDNがあるのでデータをサーバーに保存する必要もありません。

なんとも至れり尽くせり。

では早速使っていきましょう！

準備は簡単！CDNからCSSを読み込む

HTMLファイルに直接読み込む場合は下記のlinkを使って読み込みます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

1	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

CSSファイルに読み込む場合は@importを使って読み込むこともできますよ。
@importはCSSファイルの先頭に記述しましょう。

@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);

1	@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);

準備はこれだけです。
どちらでも好きな方法で読み込みましょう。

設置したいアイコンを選ぶ

https://fontawesome.com/にアクセスして icons をクリックすると、全てのアイコンが表示されます。

グレーアウトしているアイコンは有料(60ドル/年)でライセンスを購入することで使用できるようになりますが、無料でも1,300以上のアイコンが使えるので安心してください。

また、アイコンを使うには様々な方法が用意されていて、好みで使い分けることもできます。

HTMLのiタグを使用してHTMLに直接設置する方法、Unicodeを使ってCSSファイルで設置する方法、さらにアイコンをSVGでダウンロードすることも可能です。

CSSで:beforeや:afterに設置する

何度も繰り返す項目にアイコンを設置する場合はこの方法が便利です。font-familyにFont Awesomeを指定して、font-weightに900、contentにはUnicodeを指定します。

ちなみに、f179というのがUnicodeです。

任意のclassを作り、:afterに設置してみましょう。

.test:after {
	font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
	content:"\f179";
	font-weight:900;
}

.test:after {

font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";

content:"\f179";

font-weight:900;

}

font-familyは「通常のアイコン」と「ブランドのアイコン」2つに分かれているのですが、アイコンによってCSSファイルを触らないといけないのが面倒なので2つとも設置しています。

contentにはUnicodeを設定します。先頭に\(バックスラッシュ)を置いてください。

これで表示されますよ。

HTMLに直接設置する

同じものを繰り返さない場合は、直接HTMLファイルに書くのが便利です。

<i class="fab fa-apple"></i>

1	<i class="fab fa-apple"></i>

SVGで設置する

バージョン5からはSVGをダウンロードできるようになりました。
便利ですが、使いどころは限られそうですね。

<svg aria-hidden="true" data-prefix="fab" data-icon="apple" class="svg-inline--fa fa-apple fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376 512"><path fill="currentColor" d="M314.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C59.3 141.2 0 184.8 0 273.5c0 26.2 4.8 53.3 14.4 81.2 12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"></path></svg>