アイコンを「Font Awesome」から変更。→「自分で探したSVG」を「自分のserver」へアップロード

デザインアイコン

目次一覧

 状態:-  閲覧数:1,110  投稿日:2020-04-18  更新日:2020-04-18
これまでの経緯 / 私が考える、FontAwesome の問題点 / 1.CDNが落ちると、自分のサイトが表示されなくなる

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

「Font Awesome」で「ダウンロードしたSVGを直接表示」する方法


これまでの経緯 / 私が考える、FontAwesome の問題点 / 1.CDNが落ちると、自分のサイトが表示されなくなる

 閲覧数:262 投稿日:2020-04-18 更新日:2020-04-18 

これまでの経緯


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

私が考える、FontAwesome の問題点


1.CDNが落ちると、自分のサイトが表示されなくなる
・CDNに問題が発生した場合、処理が止まる(FontAwesome を読み込めなくなる)
→ 自分のサイトが表示されなくなる

2.表示が遅くなる
・10数個のアイコンを表示するためだけに、9,000個近くのアイコンを読み込んでいる
→  非効率的

3.バンドルが面倒
・必要ファイルのみ読み込むよう変更しようと思ったが、Bootstrap のように、バンドルしたファイルをダウンロードできる仕組みが用意されていない
・自分で用意しなければいけない

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

5.独自ルールなので次に繋がらない
仕様変更する度に、ルールを改めて学ぶ必要がある
・しかし、何れも FontAwesome 特有の独自ルールなので、他で活かせない
→ その時間を、根本的な理解(例えばSVGなど)に当てた方が良いのでは?

1.CDNが落ちると、自分のサイトが表示されなくなる


問題発生
Webサイトが正常表示されない

原因
FontAwesome が落ちていた

一定期間経過しても正常に読み込めない場合は、読み込み自体を回避する方法はあるの?
・ない
CDNが落ちているとき、ファイルの読み込み自体を止める方法はありますか?

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

 閲覧数:299 投稿日:2020-04-18 更新日:2020-04-18 

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」である必要はないのでは?

「Font Awesome」で「ダウンロードしたSVGを直接表示」する方法

 閲覧数:253 投稿日:2020-04-18 更新日:2020-04-18 

「Font Awesome」で「ダウンロードしたSVGを直接表示」する方法


1.表示したいSVGをダウンロード

2.表示したい場所に、ダウンロードしたSVGソースコードを貼り付け
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>

3.CSSでスタイリング
SVGの色指定
「枠線を塗るstroke」と「内部を塗るfill」の2種類ある

色は、<svg>タグではなく<path>タグに対して行う
→ 誤り。下記は、直下の階層にある子セレクタを指定しているから
<style>
svg{
 width:2.0rem;
 height:2.0rem;
}
svg > path{
 fill: orange;
}
</style>





類似度ページランキング
順位 ページタイトル抜粋
1 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 38
2 私がよく利用するFont Awesome 無料アイコン。毎回探すことが面倒なので 38
3 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) 34
4 「Icon Font」を「Font Awesome」で統一 33
5 Chrome で右クリックから保存しようとするとフリーズする → フォルダーオプションで「別のプロセスでフォルダーウィンドウを開く」 33
6 「Illustrator CS3」 で「SVG トリミング出力」するためには、「トリムエリアツール」ではなく「アートボードの大きさ」を「オブジェクトサイズ」へ変更した後出力 33
7 perspectiveのベンダープレフィックスを自動付与したい 33
8 「Twitter Bootstrap」2系のアイコンは、画像なので大きく出来ない 32
9 「Google Chrome」タブをグループへ追加すると、そのタイミングでグループは自動的に開かれてしまいます。開かないようにすることはできません 31
10 「Photoshop CS3」で、レイヤーを他のPSDへコピーする方法 31
11 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 31
12 「Dreamweaver CS3」 … エスケープを利用した正規表現置換 31
13 Chrome コンソール画面で CSSの:hover 適用スタイルを確認 31
14 Firefox プライベードブラウジングを止めたら、アドオンバーが非表示 31
15 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 31
16 Awesome Screenshot 30
17 Font Awesome 表示方法は2種類ある。A.JavaScript + SVG。B.CSS + Webフォント 30
18 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 30
19 Font Awesome v5.0.8 30
20 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 30
2023/2/05 0:20 更新
週間人気ページランキング / 1-28 → 2-3
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 37
3 「bgcolor」「background-color」「background」の違い | CSS 36
4 RGBの種類 / ビットカラー | RGB(色) 30
5 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
6 「東京都」のカラーコード取得は難しい | カラーコード(色) 18
6 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 18
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 17
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 16
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 16
9 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 15
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 15
10 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 14
11 Design 0 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
12 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 12
12 HSLとHSVの違い | 色変換(色) 12
13 ICCプロファイル | カラーマネージメント(色) 11
2023/2/4 1:01 更新