Font Awesome 5の使い方
Font Awesome5 Free 一覧
https://fontawesome.com/icons?d=gallery&m=free
バージョン4と書き方が変わっているので、4から5にバージョンアップする時には注意が必要です。注意事項は後述します。
Webフォントとして読み込む
以下を<head>タグ内に記載する。私はこちらを使っています。
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">SVGとして読み込む
以下を<head>タグ内に記載する。
searchPseudoElements: trueは、疑似要素を使えるようにするための記述です。疑似要素を使わない方は<style>は不要です。
<style>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</style>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>実際に使ってみる
「 」を使いたい場合はこう書きます。
「Font Awesome 5 │ アイコン検索」で「home」と検索すると、「fa-home」という記述があるので、以下のように記述します。すると「 」と表示されます。
サイズを大きくする
- fa-lg (1.333…倍)
- fa-2x (2倍)
- fa-3x (3倍)
- fa-4x (4倍)
- fa-5x (5倍)
<i class="fas fa-home fa-lg"> </i>
疑似要素で指定する
.■ここにクラス名::after {
font-family: "Font Awesome 5 Free";
content: "\f015";
}
font-familyは2つあります
例えば、TwitterやFacebook、LINEなどがBrands(ブランド系)アイコンになります。
バージョン4と5の記述方法の違い
4では「fa」だった部分が、5では「fas」「far」「fal」「fab」と少し変化して記述することになります。
アイコンの分類がSolidの種類のアイコンはfas、Regularの種類のアイコンはfar、Lightの種類のアイコンはfal（有料版のみ）、Brandsの種類のアイコンはfabとなります。なお、太さの種類がSOLIDの場合、font-weight: bold;を指定しなければ表示されないようです。
