サイト&ブログの作り方

AFFINGER6:CSSのFontAwesomeが表示されない

2021年9月18日

  1. HOME >
  2. コラム >
  3. サイト&ブログの作り方 >

AFFINGER6:CSSのFontAwesomeが表示されない

2021年9月18日

株式会社オンスピードから販売されている、WordPressの有料テーマ『AFFINGER6』。

『AFFINGER6』はスタイリッシュで高機能なテーマですが、『AFFINGER5』から『AFFINGER6』にアップデートしたところ、ちょっと困ったことが起こってしまいました。

いままでトラブルなく表示されていたアイコンフォント『FontAwesome』が表示されなくなってしまったのです。

FontAwesomeの表示方法は、【<i>タグを用いる方法】と【CSSの疑似要素で表示させる方法】の二種類があります。

【CSSの疑似要素で表示させる方法】というのは、スタイルシート(CSS)を使って、「before::~~」「after::~~」と記述するアレです。

『AFFINGER6』にしたとたん、どちらも表示されなくなってしまいました。
あれこれ試行錯誤して解決しましたので、その方法をご紹介いたします。

結論としては以下のとおりです。

【<i>タグを用いる方法】の場合⇒
FontAwesome5のCDNを、【コードの出力】欄に入力する。
※【コードの出力】は、【AFFINGER管理】>>【その他】>>【上級者向け】>>【コードの出力】にあります。

【CSSの疑似要素で表示させる方法】の場合⇒
【font-family】の指定を【stsvg】にすることで、無事に表示されます。

このページでは、後者の【CSSの疑似要素で表示させる方法】について解説します。

『AFFINGER5』で表示させていたコード

『AFFINGER5』では『FontAwesome4』だった

『AFFINGER5』だと、たとえばリンク(aタグ)の前にFontAwesomeを表示させる場合だとこんな感じのコードでした。
これはFontAwesomeのバージョン『4』の書き方です。

.hogehoge a::before{
 font-family:"FontAwesome";
 content:"\f02b"; 
 padding-right:6px;
 color:#f5feff;
}

『AFFINGER6』では『FontAwesome5』になったから表示されないだけでは?

そう、『AFFINGER5』では『FontAwesome4』でしたが、『AFFINGER6』では『FontAwesome5』になりました。

だったら、FontAwesome4の書き方では表示されないだけなんじゃないの??
FontAwesome5の書き方にしたらフツーにいけるっしょ☆

わたしもそう思ったので、『FontAwesome5』の書き方で書きましたが、表示されませんでした!

先ほどのコードを一般的な『FontAwesome5』にしたもの↓↓↓

.hogehoge a::before{
 font-family:"Font Awesome 5 Free";
 content:"\f02c";
 font-weight: 400;
 padding-right:5px;
 color:#f5feff;
}

たいていの解説サイトでは、「こうやって表示させよう♪」と書いてあると思います。
が、「font-family」を『Font Awesome 5 Free』にしようが、「font-weight」を『400』や『900』と調べて指定しようが、『AFFINGER6』の場合だと表示されません。

今後はこちら! 『AFFINGER6』で表示できるコード

『font-family』を【stsvg】にしよう

FontAwesome5をCSSの疑似要素を使い『AFFINGER6』で表示させるためには、『font-family』を【stsvg】にする必要があります。

先ほどのコードの場合だと、このようになります。

.hogehoge a::before{
 font-family:"stsvg";
 content:"\f02c";
 font-weight: 400;
 padding-right:5px;
 color:#f5feff;
}

それでも表示されないときのチェックポイント

CSSの疑似要素で使うだけなら、CDNはいらない

『AFFINGER6』で『FontAwesome5』を使う場合、<i>タグを使わずにCSSの疑似要素のみで使用するならばCDNは必要ありません。

ですので、CSSの疑似要素で使いたいのにFontAwesome5がなぜか表示されないとき、その原因はCDNの有無ではありません。

「font-weight」は設定している?

『AFFINGER5』でデフォルトだった『FontAwesome4』では必要なかったのですが、『FontAwesome5』では「font-weight」の設定が必要です。
「font-weight」を設定しないと、CSSの疑似要素でFontAwesome5は表示されません。

無料版の場合、FontAwesome5の「font-weight」は【400】と【900】の二種類。
どちらかを設定してみてください。

このコードを書いた理由

『AFFINGER6』でCSS疑似要素を使ってFontAwesome5を表示させるには、font-familyの設定を『stsvg』にすることがポイント!
『AFFINGER6』でCSS疑似要素を使ってFontAwesome5を表示させるには、font-familyの設定を『stsvg』にすることがポイント!

FontAwesomeは摩訶不思議な動作をすることが多く、正直なところ使っているとけっこうストレスがたまります!(笑)

それでもFontAwesome以外のアイコンフォントを使うのも気が進まなくて……。
FontAwesomeの画風(?)、かわいさの中にユーモアもちょっとあってそこそこ好きなんです。

なんとか使いこなしたいなー……というわけで、『AFFINGER6』でFontAwesomeがCSS疑似要素でどうして表示できないのか、原因をがんばって追求しました。

ただ、現在は、FontAwesomeをCDNで使うためにはアカウント登録が必要です。
『FontAwesome6』は有料版のみの展開らしいですし(2021年9月現在)、全体的に「有料版に登録してね~」な雰囲気を以前よりもひしひしと感じます。

このまま無料のFontAwesomeを永遠に使うの……っていうわけにはいかないだろうなーと、なんとな~~く思ってしまいますねえ。
いにしえの個人サイト時代みたいに、小さなアイコンは画像で表示する……、そんな日がまたやってきたりして……!?

イラストレーター 鍋弓わた が表紙を描いた本

イラストレーター 鍋弓わた が描いた漫画(同人誌)

  • あとりえ極星堂 運営者
  • 新しいページ

鍋弓わた

こんにちは。近代史に強いイラストレーターの鍋弓わたです。
イラストや漫画を描くのが好きなので、一児の母になったいまも仕事に趣味にぼちぼち描いています。
サークル名『極星堂きょくせいどう』で同人活動もしています。
大阪生まれの奈良在住。

よりよい作品づくり、より楽しく生きるために自己肯定感を高める方法を模索中。
趣味は2003年からおこなっているウェブ制作。
気がつけば今年で18年目。

⇒もっと自己紹介

pixiv 小説家になろう

⇒お問い合わせ

-サイト&ブログの作り方
-,