目次一覧
状態:-
閲覧数:3,515
投稿日: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>