【HTML・CSS】 「Font Awesome」を HTML に直接記述する

この記事は約3分で読めます。
記事内に広告が含まれています

コーディングのイメージ

こんにちは、さち です。

先日、「HTML」に「Font Awesome」のアイコンを直接記述して使いたいことがありました。

「Font Awesome」はアイコンフォントという特性上、HTML で使うには「Unicode」を手入力する必要があります。しかし、ただ「Unicode」を入力するだけでは、上手くいきません……。

最終的には上手くいったので、その備忘録を残しておきます。

スポンサーリンク

サンプルコード

HTML

<span class="sample">&#xf5bb;</span>

Font Awesome 公式サイトで使用したいアイコンの「Unicode」をコピーして、HTML に記述します。例えば、今回の下図のような場合、&#xf5bb と記述します。

Font Awesome の公式サイト

CSS

.sample {
  font-family: "Font Awesome 6 Free";
  color: HotPink;
}

実行結果

結果

豆腐になってしまって、Font Awesome のアイコンが表示されません。

解決方法

「Font Awesome」は font-weight によってアイコンの種類やデザインが分かれています。

使用するアイコンによって適切な font-weight を指定しないと、前項のようなアイコンが表示されないという問題が発生します。

  1. 「Font Awesome」の公式サイトで使用したいアイコンを開き、「HTML」にあるクラス名を確認します。今回の場合、fa-solid または fas です。
    Font Awesome の公式サイトの画面
  2. クラス名をもとに対応している font-weight を確認します。今回は fa-solid または fas なので、font-weight は 900 です。
    クラス名 font-weight
    fa-solid
    fas
    900
    fa-regular 400
    fa-light 300
    fa-brands
    fab
    400
  3. 先ほどの CSS に font-weight: 900; を追加します。
    .sample {
      font-weight: 900;
      font-family: "Font Awesome 6 Free";
      color: HotPink;
    }
  4. これで、Font Awesome を表示できるようになりました。
    結果

【別解】 「クラス」を使う方法

Font Awesome を使用するための CSS を読み込んでいる場合は、font-weight の代わりに上記の手順で確認した「クラス」を「要素」に追加しても解決できます。

今回の場合は、使用する Font Awesome のバージョンに合わせて、下記のように <span> にクラスを追加すればOKです。

<!-- ver. 6 -->
<span class="sample fa-solid">&#xf5bb;</span>

<!-- ver. 5 -->
<span class="sample fas">&#xf5bb;</span>

コメント

タイトルとURLをコピーしました