SANGOでFontAwesome4.7から5へと切り替える方法と注意点
えあん

アップデートによりFontAwesomeが表示されなくなった

アップデートお疲れ様です。

一部のアイコンが「□」に表示になってしまいました。多分バージョン「Ver1.7.3」にアップデートしてなってしまいました。

改善方法はありますか?
またバージョンを戻す方法など教えていただけたら幸いです。

よろしくお願い致します。

コメントへの回答
サルワカくん
2018/12/21

この記事に書かれている通り、外観⇒カスタマイズ⇒詳細設定の「FontAwesome4.7を使用する」オプションにチェックを入れることで、アイコンが表示されるようになるはずです。
FontAwesome5を使用する場合は、□になってしまっている部分のコードの置き換えが必要です。
必須プラグインなどがFontAwesome4.7にしか対応していない場合、FontAwesome4.7を使うのが良いと思います。

上記の設定さえすれば、その他の問題は発生しませんが、それでもバージョンを戻したいですか?
また、バックアップは取られていますか?

えあん
2018/12/22

『外観⇒カスタマイズ⇒詳細設定の「FontAwesome4.7を使用する」オプションにチェックを入れる』こともやってみたのですが、今度は別のアイコンが「□」になります。

あまりHPの知識とVer.1.7.3のアップデートが理解していなくご質問させてください。
● 今僕のサイトのアイコンは「FontAwesome4.7」と「FontAwesome5」がごちゃまぜになっているということですか?
● Ver.1.7.2のバージョンの時は、問題なく表示されていたのですが、それはなぜですか?
● Ver.1.7.3は「FontAwesome4.7」にしか対応しないということですか?
● カスタマイズ設定の「FontAwesome4.7を使用する」にチェックを入れると『FontAwesome5』に対応になるということでしょうか?

知識不足で、ご迷惑をおかけして申し訳ございません。対応お待ちしています。

サルワカくん
2018/12/22

● 今僕のサイトのアイコンは「FontAwesome4.7」と「FontAwesome5」がごちゃまぜになっているということですか?
⇒拝見したところそうですね。ご自身で(もしくはPORIPU)でFontAwesome5のコードの読み込みを行っているようです。
4.7と5を共存させようとすると無駄なファイルを読み込むことになります。読み込み速度に大きな影響を与えるのでおすすめしません。

● Ver.1.7.2のバージョンの時は、問題なく表示されていたのですが、それはなぜですか?
⇒ 以前使用したのはVer.1.7.2ではなく、Ver 1.6ですかね。Ver 1.6からVer 1.7.xではFontAwesome4.7と5の切り替えを簡単にできるよう、CSSのコントロールをしています。
こちらはPORIPUなどの子テーマを入れている感じでしょうか。SANGO標準のFontAwesomeの読み込みが解除されており、「FontAwesome4.7を使用する」にチェックを入れても、4.7の読み込みコードが無効になっているようです。
結果として4.7用のCSSのコントロールのみが残り、問題が生じている模様です。

● Ver.1.7.3は「FontAwesome4.7」にしか対応しないということですか?
⇒ 違います。この記事に書いてある通り、4.7と5のアイコンの一部には互換性がないため、5を使用するためには、一部のコードの書き換えが必要です(ご自身でアイコンを設置した場所に限ります)。
4.7と5を共存させるようなコードを書けば、現在のままでも問題なく表示するようにすることは可能ですが、SANGOとしては読み込み速度を大幅に低下させるような仕様にはするつもりはありません。
     
● カスタマイズ設定の「FontAwesome4.7を使用する」にチェックを入れると『FontAwesome5』に対応になるということでしょうか?
⇒ 違います。4.7のコードが読み込まれます。ただし、どこかでSANGOの「FontAwesome4.7」の読み込みが無効になっています。

解決策① 「FontAwesome4.7を使用する」にチェックを入れたままにして、「SANGOのFontAwesomeの読み込み解除をやめる」
おそらくPORIPUの機能ですかね(僕が開発しているわけではないので分かりませんが)。PORIPUのFontAwesome5の読み込みオプションを解除してみてください。
ほとんどのアイコンはFontAwesome4.7のものを使用しているようなので、問題なく表示されるようになるかもしれません。
解決策② Ver1.6に戻す
BOOTHにVer1.6のファイルを置いておきました。旧バージョンに戻して、PORIPU(?)のアップデートをお待ちください。

えあん
2018/12/22

ご丁寧・速やかな対応に感謝しています。

正しいやり方かわかりませんが、
● 外観⇒カスタマイズ⇒詳細設定の「FontAwesome4.7を使用する」オプションにチェックを入れる
その後、
● 外観⇒カスタマイズ⇒追加CSSにて
.fa, .far, .fas {
font-family: FontAwesome;
}
こちらを入力したら元に戻りました(それでも表示されていないアイコンは記事のやり方とFontAwesome4.7のURLからコードを持ってきて置き換えしました)

僕の知識不足でお手数をおかけして申し訳ございません。4.7と5がごちゃまぜになっているやつは自分なりに勉強しながら整理してみたいと思います。
問題があった時は、Ver.1.6に戻したり、バックアップは毎回しっかりするよう心がけます!

SANGOやPORIPUに出会えたおかげで、HPが自分でカスタマイズできる喜び・楽しさを日々実感しています。それと速やかな対応のおかげで問題解決もしっかりできることに本当に感謝です。
今後もワクワクするようなアップデートを心よりお待ちしています。

サルワカくん
2018/12/22

ご報告ありがとうございます。
いえ、こちらこそお手数をおかけして恐縮です。
今後ともよろしくお願い致します。