3.バンドルが面倒 / 4.ライセンス表記が面倒 / この時、抱いた感想

Webデザイン

カテゴリー: アイコン  閲覧数:733 配信日:2020-04-18 13:20


3.バンドルが面倒


Font Awesome 5ではAPIが用意されている
・使用するフォントのみをjsファイル内にバンドルすることができる
※使用しないフォントはバンドルされないため、大幅な軽量化となる

バンドルするためには、Node.js が必要
→ 環境構築が面倒 

4.ライセンス表記が面倒


「CDN経由」ではなく、「ダウンロードしたSVGを直接表示」すれば良いのでは? と思ったが…
ダウンロードしようとすると、下記警告が表示される
This SVG Icon Requires Attribution
Before you download, this icon is licensed under the Creative Commons Attribution 4.0 International license and requires that you comply with the following:

You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

If this is a real thorn in your side, grabbing a paid plan removes this attribution restriction (and gives you tons more icons and goodies too).

Agree & Download the SVG
機械訳
このSVGアイコンには帰属が必要です
ダウンロードする前に、このアイコンはCreative Commons Attribution 4.0 Internationalライセンスに基づいてライセンスされており、以下に準拠する必要があります。

適切なクレジットを付与し、ライセンスへのリンクを提供し、変更が行われたかどうかを示す必要があります。 お客様は、合理的な方法でこれを行うことができますが、ライセンサーがお客様またはお客様の使用を承認することを示唆する方法ではありません。

有料プランを取得すると、この帰属制限が取り除かれます(さらに多くのアイコンや特典が提供されます)。

SVGに同意してダウンロードする

どういうことなの?
CSS版やJavaScript版は、コードの先頭にライセンスが記載されているため、新たに追記する必要はありません。ですが、SVGを抜き出す場合、使用者側でライセンスを記載する必要があります
FontAwesomeをSVGで使用する【JavaScriptなし】


この時、抱いた感想


面倒くさいわ
「CDN経由」ではなく「ダウンロードしたSVGを直接表示」するのであれば、そもそも「Font Awesome」である必要はないのでは?

週間人気ページランキング / 4-14 → 4-20
順位 ページタイトル抜粋 アクセス数
1 Design 0 25
2 「Default User」を削除したら、既存ブックマークが削除されてしまった! 24
3 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 20
4 「.aiファイル」を下位バージョンで保存するための操作手順 / OS 上で「.aiファイル」から「作成したIllustratorバージョン」を確認する方法 / 下位バージョンのIllustratorで開く方法 16
5 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 15
6 Material Design 2014 年 | Material Design(色) 13
7 Adobe Camera Raw 4.0 | Photoshop 11
8 Chromeシークレットモードで、ウインドウ幅をリサイズしようとすると、下限制限を受ける | Google Chrome(ブラウザ) 10
9 拡張機能が Chrome によって無効にされました / この拡張機能は破損している可能性があります。 | Chrome 拡張機能 8
10 RGBの種類 / ビットカラー | RGB(色) 6
11 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 5
11 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
12 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
12 鉄道会社毎のカラーコード | カラーコード(色) 4
12 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
12 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 4
12 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 4
12 アイコン | 3系(Bootstrap) 4
13 RGB ⇔ Lab | 色変換(色) 3
13 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
2026/4/21 5:05 更新
指定期間人気ページランキング / 2020-5-30 → 2026-4-20
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8934
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4624
3 Design 0 4117
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3798
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2788
6 RGBの種類 / ビットカラー | RGB(色) 2781
7 「bgcolor」「background-color」「background」の違い | CSS 2104
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2101
9 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1984
10 16進数カラーコード / 2進数 1890
11 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 1888
12 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1721
13 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1704
14 「属性」「プロパティ」「アトリビュート」の違い | CSS 1649
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能(ブラウザ) 1568
16 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1537
17 「東京都」のカラーコード取得は難しい | カラーコード(色) 1444
18 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1397
19 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1251
20 「西武鉄道株式会社」のブランドカラーは、3色(#3366CC、#66CCFF、#33CC66) | 色 1236
2026/4/21 5:05 更新