ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

Font Awesome 5は公式のCDNでCSS配布をやめるらしい

Font Awesome

WebアイコンフォントにFont Awesomeがあります。CSSをHTMLにはめ込むだけで使えます。

CSSファイルを読み込むのに、CDNが一番かんたんな方法ですが、公式のCDNの配布をやめるそうです。

ということで別のところからCDNをもってきます。

ここでは、

『Font Awesomeが公式のCDNでCSSファイル配信をやめるから他のCDNサービスを使ってみる』

『AMPは対応していない。どうなるの?』

という話をしていますが、2022/4/2現在、最新版のCSSファイルが配信されています。

5系: https://use.fontawesome.com/releases/v5.15.4/css/all.css

6系: https://use.fontawesome.com/releases/v6.1.1/css/all.css

ただ、今のFont AwesomeはKit配信をメインにしているので、CDN配信はよく探さないと分かりません。

(以下、書いた当時のまま残しておきます。)

Font Awesome 5は公式のCDNでCSS配布をやめます。

正確には、

CSSを動的に展開するJavaScriptをCDNで配布する

ので、『CSSファイルの配信』をやめます。SVGのJavaScript配布と統合するようです。

今回はバージョン5の話です。

バージョン4はCDNの配布をつづけます。betaなので今後はわかりませんが。

FontAwesome CDN End
Font Awesome公式CDNページ

2019年7月7日現在、Font Awesomeのアカウントを作成しないと見れません。

ということで、CDNJSというCDNサービスを使います。

all.min.cssを選んで、『Copy Link Tag』でコピーします。

自分のサイトのHTMLのヘッダ(<head>)に貼り付けてください。できればサイトの全ページ共通でつかう<head>に貼り付けます。

貼り付け例
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
</head>

WordPressなら、header.phpのタグ内の1か所に貼り付けるだけです。そのほかでも同じようなテンプレートに貼り付けてください。

個別のページに貼り付けると、アイコンフォントを使うページ数分の貼り付け作業が発生するのでめんどうです。

AMPは対応できない。どうなるのか?

Font Awesomeの最新バージョンは5.9.0です。

(2019年7月7日現在)

CDNは、いますぐやめるわけではなく、次期バージョン(5.10 ?)からサポートしないようです。

そうなると対応できないのはAMPです。

AMPでは、サポートしているFont Awesomeは2つです。

https://use.fontawesome.comFont Awesome公式。
https://maxcdn.bootstrapcdn.comBootstrapCDN。

公式はなくなるので、のこりはBootstrapCDNですね?

でもBootstrapCDNは、Font Awesomeのバージョンが4.7.0です。

このままだとFont Awesome 5は使えません。

このあたりも対応してくれるんでしょうね? どうなるか要チェックです。

前の投稿
WebでアイコンフォントFont Awesome 5を数秒で使えるようにする方法
アイコンフォントFont Awesomeはアカウントが必要になった
次の投稿

HTML&CSSの本

post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。

コメントを残す

*