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

デザインアイコン

目次一覧

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

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

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


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

 閲覧数:67 投稿日: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.ライセンス表記が面倒 / この時、抱いた感想

 閲覧数:74 投稿日: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を直接表示」する方法

 閲覧数:65 投稿日: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 「Photoshop CS3」で、レイヤーを他のPSDへコピーする方法 31
10 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 31
11 「Dreamweaver CS3」 … エスケープを利用した正規表現置換 31
12 Firefox プライベードブラウジングを止めたら、アドオンバーが非表示 31
13 Chrome コンソール画面で CSSの:hover 適用スタイルを確認 31
14 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 31
15 Awesome Screenshot 30
16 Font Awesome 表示方法は2種類ある。A.JavaScript + SVG。B.CSS + Webフォント 30
17 Font Awesome v5.0.8 30
18 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 30
19 「Fireworks CS3」は「SVG」 出力不可 30
20 角丸の上部分を違う色にしたい/Fireworks 8 30
2021/7/28 9:55 更新
週間人気ページランキング / 7-21 → 7-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 47
2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
5 RGBの種類 / ビットカラー | RGB(色) 17
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 HSLとHSVの違い | 色変換(色) 15
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
9 Design 0 12
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
10 「bgcolor」「background-color」「background」の違い | CSS 10
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
12 親要素の背景色を、CSSで打ち消したい | CSS 7
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 ログイン 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
2021/7/28 1:01 更新