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

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