mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

表示されない特定のAwesomeのアイコンはアレが必要だった



ツイッターのアイコンなんですけどね



馴染みのあるピヨピヨです。

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

このツイッターのアイコン、普段は上記のコードを使って な感じに表示させていたのですが、たまに違う方法で表示させたい時もあるじゃないですか。

この赤枠の方で表示させたい時ありますよね?それで実際にやってみるとまあ上手くいかない訳です。

←こんな感じに表示されない。これ何故なんだって話ですよ。

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」だのとアイコンを表示させる条件があるのだとか。

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


公式サイト

きちんと公式を見ようと思い、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";だけで表示がされるようです。

三言ほどのスマホ表示ヘッダー部分は現在このようになっていますが、ツイッターアイコン部分をCSS疑似要素で表示させると良いと思います。しかし、この方法を知らずに断念してしまった為、現在うちではここの表示を<i class="fab fa-twitter-square"></i>を使って表示させています。

font-family: "Font Awesome 5 Brands"; が必要だったという話でした。