こんにちは、さち です。
先日、「HTML」に「Font Awesome」のアイコンを直接記述して使いたいことがありました。
「Font Awesome」はアイコンフォントという特性上、HTML で使うには「Unicode」を手入力する必要があります。しかし、ただ「Unicode」を入力するだけでは、上手くいきません……。
最終的には上手くいったので、その備忘録を残しておきます。
サンプルコード
HTML
<span class="sample"></span>
Font Awesome 公式サイトで使用したいアイコンの「Unicode」をコピーして、HTML に記述します。例えば、今回の下図のような場合、
と記述します。
CSS
.sample { font-family: "Font Awesome 6 Free"; color: HotPink; }
実行結果
結果
豆腐になってしまって、Font Awesome のアイコンが表示されません。
解決方法
「Font Awesome」は font-weight
によってアイコンの種類やデザインが分かれています。
使用するアイコンによって適切な font-weight
を指定しないと、前項のようなアイコンが表示されないという問題が発生します。
- 「Font Awesome」の公式サイトで使用したいアイコンを開き、「HTML」にあるクラス名を確認します。今回の場合、
fa-solid
またはfas
です。
- クラス名をもとに対応している
font-weight
を確認します。今回はfa-solid
またはfas
なので、font-weight
は900
です。
クラス名 font-weight fa-solid
fas900 fa-regular 400 fa-light 300 fa-brands
fab400 - 先ほどの CSS に
font-weight: 900;
を追加します。.sample { font-weight: 900; font-family: "Font Awesome 6 Free"; color: HotPink; }
- これで、Font Awesome を表示できるようになりました。
結果
【別解】 「クラス」を使う方法
Font Awesome を使用するための CSS を読み込んでいる場合は、font-weight
の代わりに上記の手順で確認した「クラス」を「要素」に追加しても解決できます。
今回の場合は、使用する Font Awesome のバージョンに合わせて、下記のように <span>
にクラスを追加すればOKです。
<!-- ver. 6 --> <span class="sample fa-solid"></span> <!-- ver. 5 --> <span class="sample fas"></span>
コメント