目次一覧
状態:-
閲覧数:4,676
投稿日:2018-03-04
更新日:2020-01-25
最初に行うこと ／ 具体例 ／ 「fas」「far」「fal」「fad」の違い
v4 shim ／「Font Awesome 5」で名称変更(廃止)されたアイコン ／ 非同期読込処理
v4 shim ／「Font Awesome 5」で名称変更(廃止)されたアイコン ／ 非同期読込処理
最初に行うこと ／ 具体例 ／ 「fas」「far」「fal」「fad」の違い
最初に行うこと
既存コードのバージョン確認
class名に「fa」が付与されている場合は？
Font Awesome 4
class名に「fas」「far」「fal」「fad」の何れかが付与されている場合は？
Font Awesome 5
具体例
Font Awesome 4
<i class="fa fa-home"></i>
Font Awesome 5
<i class="fas fa-home"></i>
「fas」「far」「fal」「fad」の違い
読み込む「Web Font ファイル名」が異なる
比較一覧表
| クラス名 | アイコン |
|---|---|
| fas | Solid Icons |
| far | Regular Icons |
| fal | Light Icons |
| fad | Brand Icons |
全てを無料で使用できるわけではない
無料で使用する場合は？
・「fas」しか選択できないことが多い
・「far」を選択できることもある
※アイコン毎に無料で選択できるスタイルは異なる
具体例
Home Icon
v4 shim ／「Font Awesome 5」で名称変更(廃止)されたアイコン ／ 非同期読込処理
v4 shim
「Font Awesome 4」コードの書き方のまま、「Font Awesome 5」を使用したい場合に読み込む
あなたの古いバージョン4のアイコン名、エイリアス、および構文を保持することができ、「Font Awesome 4」のWebフォントからJavaScript実装された「Font Awesome 5」の新しいSVGにアップグレードすることさえ出来る
・How to Use
「Font Awesome 5」で名称変更(廃止)されたアイコン
Heart Icon
fa-heart-o → fa-heart
Clock Icon
fa-clock-o → fa-clock
非同期読込処理
「Font Awesome」の機能ではなく、JavaScriptの機能を使用して実装する
async属性を付与する
<script src="https://kit.fontawesome.com/xxxx.js" crossorigin="anonymous" async></script>