HTMLでFontAwesomev5.7.2を使用する方法

Font Awesomeは、サイトにアイコンを追加するための最も一般的な方法の1つです。しかし、ページの要素にCDNを追加し、表示されるのが黒い長方形だけの場合はどうでしょうか。

FontAwesomeを次のプロジェクトに追加するときに覚えておくべきことがいくつかあります。

頭にリンクを追加する

次のHTMLがあるとします。

他のCDNと同様に、に要素を追加する必要があります。Font Awesome 5.7.2の場合、次のようになります。

オンラインvsローカル

CodePenやCodeSandboxなどのWebベースのエディターで次のコードを実行すると、次のコードでアイコンが正しくレンダリングされます。

ただし、ブラウザでローカルにページを開こうとすると、アイコンの代わりに黒い長方形が表示されます。

上記href要素のをもう一度見てください。見ますか?

問題は、ローカルファイルシステムからページをロードするときに、ブラウザがファイルシステムのルートにあるFont AwesomeCSSファイルを見つけようとしていることです。

オンラインおよびローカルで機能させるには、URLスキーム(HTTP、またはそれ以上のHTTPS)をhref:に追加してください。

何が起きてる?

URLスキーム(href="//use.fontawesome...")を省略すると、ブラウザはページがロードされたのと同じURLスキームを使用します。

したがって、ブラウザでHTMLファイルを実行してページをローカルで実行する場合、hrefはFont Awesome CSSもローカルに保存されるファイルであると想定します(file:)。

要素のhref属性がすべて、URLスキームを含む完全なURLを指していることを確認してください。そうすれば、準備は完了です。