目次一覧
状態:-
閲覧数:1,810
投稿日:2020-04-18
更新日:2020-04-18
これまでの経緯 / 私が考える、FontAwesome の問題点 / 1.CDNが落ちると、自分のサイトが表示されなくなる
3.バンドルが面倒 / 4.ライセンス表記が面倒 / この時、抱いた感想
「Font Awesome」で「ダウンロードしたSVGを直接表示」する方法
3.バンドルが面倒 / 4.ライセンス表記が面倒 / この時、抱いた感想
「Font Awesome」で「ダウンロードしたSVGを直接表示」する方法
これまでの経緯 / 私が考える、FontAwesome の問題点 / 1.CDNが落ちると、自分のサイトが表示されなくなる
これまでの経緯
「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.ライセンス表記が面倒 / この時、抱いた感想
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
機械訳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に同意してダウンロードする
ダウンロードする前に、このアイコンはCreative Commons Attribution 4.0 Internationalライセンスに基づいてライセンスされており、以下に準拠する必要があります。
適切なクレジットを付与し、ライセンスへのリンクを提供し、変更が行われたかどうかを示す必要があります。 お客様は、合理的な方法でこれを行うことができますが、ライセンサーがお客様またはお客様の使用を承認することを示唆する方法ではありません。
有料プランを取得すると、この帰属制限が取り除かれます(さらに多くのアイコンや特典が提供されます)。
SVGに同意してダウンロードする
どういうことなの?
CSS版やJavaScript版は、コードの先頭にライセンスが記載されているため、新たに追記する必要はありません。ですが、SVGを抜き出す場合、使用者側でライセンスを記載する必要があります
FontAwesomeをSVGで使用する【JavaScriptなし】この時、抱いた感想
面倒くさいわ
「CDN経由」ではなく「ダウンロードしたSVGを直接表示」するのであれば、そもそも「Font Awesome」である必要はないのでは?
「Font Awesome」で「ダウンロードしたSVGを直接表示」する方法
「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>