表示されない特定のAwesomeのアイコンはBrandsだ

たとえばAwesomeのツイッターアイコンとかね

馴染みのあるツイッターのピヨピヨです。

<i class="fab fa-twitter-square"></i>

このツイッターのアイコン、上記のコードを使ってな感じに表示させる場合もあれば、違う方法で表示させることもできるじゃないですか。どちらかといったら後者の方で表示する方が多いのかもしれない。

別のコードを使ってAwesomeのアイコンを表示

赤枠のコードを使って表示させたい場合もあります。コピペだけでOK～なんてサイトから情報をお借りして実際にやってみるとなぜか表示されない。

←こんな感じになってアイコンが表示されない。何故こうなってしまうのか、という話です。

表示させたいAwesomeのアイコンのコード内容の確認

CSSの疑似要素というのを使って表示させるらしいのですが、とりあえず調べながら色々やってみたわけです。

.icon::before {
  font-family: "Font Awesome 5 Free";  /* Check1 */
  font-weight: "400"; /* Check2 */
  content: "\f081";
}

font-familyの所はFREEの場合「Font Awesome 5 Free」にしなければならない。だとか、font-weightの所は「bold」もしくは「400」だの「900」だのとアイコンを表示させる条件があるのだとか…確認してやってみます。

それでも表示されない。

検索で調べに調べたけれど、僕の検索のやり方が悪いのか上記の様なやり方を紹介している所が多く、そのやり方では表示されないので困った訳です。

Awesomeの公式サイトがあるじゃないか

Awesomeの公式サイトは日本語ではないけれど、翻訳を使えば何とかなる。Font Aawesomeのサポートページを見始めたのですが、CSS疑似要素の使い方を丁寧に紹介しているページがある事を知り、そこでブランドロゴはfont-family: "Font Awesome 5 Free"; ではなく、 font-family: "Font Awesome 5 Brands";を使っているのを発見したわけです。

アイコンの中に存在するブランドロゴ

はてなブログのスマホ表示のデザインをカスタマイズする時、ひつじさんの所でお世話になる方も結構いると思います。カスタマイズの中でヘッダー部分にCSS疑似要素を使い、アイコンを二か所表示させていますが、右アイコンの読者登録の部分は、ツイッターアイコンに変えて自身のツイッターへ誘導しても良いと思います。

しかし、そこでの表示をさせるには、font-family: "Font Awesome 5 Free";でもなく、 font-weight: "400";でもなく、font-family: "Font Awesome 5 Brands";が必要という訳です。

ちなみに、を表示させるにはfont-family: "Font Awesome 5 Brands";とfont-weight: "400";を必要とするはずなのですが、うちではfont-family: "Font Awesome 5 Brands";だけで表示がされるようです。