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

『AFFINGER6』は高機能なテーマですが、「アイコンフォント『FontAwesome』が表示されない！」と困るときがあります。

『AFFINGER5』から『AFFINGER6』へアップデートした場合も
初めから『AFFINGER6』でサイトを構築した場合も

どちらのときでもあり得る現象です。

その解決策を紹介します。

＜i＞タグで表示させるなら

FontAwesome5のCDNを【コードの出力】欄に入力する。

※【コードの出力】欄は、【AFFINGER管理】＞＞【その他】＞＞【上級者向け】＞＞【コードの出力】にあります。

【FontAwesomeIcons4.7.0の読み込み】にチェックを入れる必要はありません！！
※【FontAwesomeIcons4.7.0の読み込み】は、【AFFINGER管理】＞＞【その他】＞＞【その他の設定】、Saveボタンの近くにある項目です。

疑似要素で表示させるなら

【font-family】の指定を【stsvg】にすることで、無事に表示されます。

以下、【font-family】の指定を【stsvg】にする方法と理屈について解説していきます。

念のため確認！CSSの疑似要素でFontAwesomeを表示させるって何？

「CSSの疑似要素でFontAwesomeを表示させる」というのは、一般的に使いやすいとされる＜i＞タグを使ってFontAwesomeを表示させる方法のことではありません。
スタイルシート（CSS）に指示を書き、＜i＞タグを使わずにFontAwesomeを表示させる方法のことです。

「before::～～」「after::～～」と記述するアレです。

こうすることで決まった条件下で文章・語句を書くとき、その文章・語句の前後に自動的にFontAwesomeを表示させたりします。

たとえばリンク（aタグ）の前にFontAwesomeを表示させる場合だとこんな感じのCSSでした。

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

上のCSSだと、『.hogehoge』の範囲内で書くリンク（a）の前に、『#f5feff色』のFontAwesome『\f02b』が『6px』の余白をもって表示されるよ！

『\f02b』はこれのこと！

FontAwesomeのUnicode『f02b』はタグのアイコンのこと。
出所：fa-tag: Font Awesome Icons

復習。『AFFINGER5』でFontAwesomeをCSS疑似要素で表示させていたときはどうだった？

『AFFINGER5』は『FontAwesome4』です。

たとえばリンク（aタグ）の前にFontAwesomeを表示させる場合、こんな感じのCSSでOKでした。

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

つまりこれは、『FontAwesome4』のための書き方ってことです。

注意！単純に『FontAwesome5』の書き方をしても『AFFINGER6』では表示されない

『FontAwesome5　表示されない』あたりで検索すると、

「font-family」を『Font Awesome 5 Free』にしましょう
「font-weight」を『400』または『900』にしましょう

などと上位サイトが解説していますが、『AFFINGER6』の場合は表示されません！！

だいたいのサイトでは、たとえば以下のようなCSSで「解決する！」とうたっていることでしょう。

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

繰り返しますが、『AFFINGER6』の場合は解決しません！！

余談ですが、↑のCSSで指定しているFontAwesome『f02c』は、重なったタグのアイコンです。

FontAwesomeのUnicode『f02c』は重なったタグのアイコンのこと。
出所：tags | Font Awesome

『AFFINGER6』でCSS疑似要素のFontAwesomeを表示させるときは『font-family』を【stsvg】に！

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

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

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

『stsvg』とは？

『stsvg』は、FontAwesomeを示す『AFFINGER6』専用の「font-family」です。

『stsvg』の『st』は、『STINGER STORE』を意味していると思われます。

『STINGER STORE』はAFFINGER6を製作・販売している株式会社オンスピードさんのオンラインショップです。
また、株式会社オンスピードさんは『STINGER』というテーマもつくっていらっしゃいます。

株式会社オンスピードさんにとって『STINGER』は大切な言葉！

FTPソフトで『AFFINGER6』のテーマフォルダを覗くと、頭文字に『st』とつくphpファイルがたくさんあるのがわかりますよ！
もちろん『AFFINGER』専用のファイルばかりです。

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

CDNの有無は原因ではない

『AFFINGER6』のCSS疑似要素でFontAwesome5を使うとき、たとえFontAwesome5が表示されなくてもその原因はCDNの有無ではありません！

＜i＞タグを使わないなら、『AFFINGER6』ではCDNは必要ありません。

FontAwesomeのCDN

ここでいうFontAwesomeのCDNは、＜head＞内に入れる専用のコードのことです。

＜i＞タグでFontAwesomeを使うならコレが必要……と、＜head＞内にコードをコピペして入力したはずです。
それがCDNです。

CDNを貼っているウェブページにアクセスすると、そのウェブページは自動的に該当のサーバーにつないで必要なデータを引っ張ってきます。
そのデータが今回は『FontAwesome』というわけです。

こんな感じのやつです。
※文字化け防止のため、カッコは全角で表記しています。

＜link href=”https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=”stylesheet”＞

「font-weight」の設定ミスの可能性が高い？

FontAwesomeの「font-weight」設定は、FontAwesome4（＝『AFFINGER5』時代）は不要でした。

対して、FontAwesome5（＝『AFFINGER6』使用時）には「font-weight」設定が必要です。
「font-weight」を設定しないと、CSSの疑似要素でFontAwesome5は表示されません。

font-weightとは？

「font-weight」は文字の太さのことです。

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

どの太さに対応しているかは、FontAwesome公式サイトでたしかめることができます。

FontAwesomeは便利だけどむずかしいよね

『AFFINGER6』のCSS疑似要素でFontAwesome5が表示されないときは、フォントファミリー（font-family）の設定を『stsvg』にするといい。

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

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

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

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

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