「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード)

フォント ＞ Font Awesome

目次一覧

　状態:- 　閲覧数:3,607 　投稿日:2018-03-04 　更新日:2020-01-25
最初に行うこと ／ 具体例 ／ 「fas」「far」「fal」「fad」の違い

v4 shim ／「Font Awesome 5」で名称変更(廃止)されたアイコン ／ 非同期読込処理

最初に行うこと ／ 具体例 ／ 「fas」「far」「fal」「fad」の違い

　閲覧数:422　投稿日:2019-10-22　更新日:2019-10-22

最初に行うこと


既存コードのバージョン確認

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」で名称変更(廃止)されたアイコン ／ 非同期読込処理

　閲覧数:412　投稿日:2019-10-22　更新日:2019-10-22

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>


「Icon Font」を「Font Awesome」で統一

Font Awesome v5.0.8



類似度ページランキング
順位 ページタイトル抜粋 ％
1 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) 49
2 アイコンを「Font Awesome」から変更。→「自分で探したSVG」を「自分のserver」へアップロード 34
3 私がよく利用するFont Awesome 無料アイコン。毎回探すことが面倒なので 26
4 Font Awesome 4.7.0 26
5 Font Awesome v5.0.8 26
6 Chromeバージョンアップでフォント指定が効かなくなる 25
7 Firefox プライベードブラウジングを止めたら、アドオンバーが非表示 25
8 「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない 25
9 「Icon Font」を「Font Awesome」で統一 25
10 Illustrator Fireworks 対応バージョン比較 24
11 Chrome で右クリックから保存しようとするとフリーズする → フォルダーオプションで「別のプロセスでフォルダーウィンドウを開く」 24
12 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 24
13 「PhotoShop CS3」　と、「Vieas」　の違い 23
14 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 23
15 「position:absolute;」が分からなくなったときに見るエントリー 23
16 Firefox7 「このサイトのパスワードを保存しますか？」を非表示にする(案) 22
17 「Twitter Bootstrap」2系のアイコンは、画像なので大きく出来ない 22
18 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 22
19 「Google Chrome」を経由したダウンロード個人ルール。「HTTrack Website Copier」とパッケージ化されていない拡張機能「Save As MHT 20220426」の 2 種類 21
20 Awesome Screenshot 21
2024/11/22 19:15 更新
週間人気ページランキング ／ 11-15 → 11-21
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 12
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 10
3 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 6
3 Design 0 6
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
5 RGB ⇔ Lab | 色変換(色) 4
5 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 4
5 16進数カラーコード ／ 2進数 4
6 カラーコード ／ 色コード | カラーコード(色) 3
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
6 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB 2
7 RGBの種類 ／ ビットカラー | RGB(色) 2
7 8ビットカラー ／ インデックスカラー ／ パレットカラー 2
7 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
2024/11/22 1:01 更新