SANGOではこれまで「FontAwesome4.7」を利用してきました。しかし、長期的な視点から、SANGO v1.7において「FontAwesome5」に対応しました。変更の手間が最小限になるよう工夫しておりますが、一部のアイコンタグの書き換えが必要になる場合があります。
目次
FontAwesome4.7を継続利用する場合
SANGO v1.7ではデフォルトでFontAwesome5が有効になります。「アイコンタグの書き換えをしたくない」などの理由で、FontAwesome4.7を継続して利用する場合は、外観⇒カスタマイズ⇒詳細設定⇒「FontAwesome4.7を使用する」にチェックを入れてください。
v1.7.2をご利用の方はチェックを外した際に保存されない問題が生じる場合があります。大変お手数をおかけしますが「ダッシュボード」⇒「更新」⇒一番下までスクロールして「SANGO」にチェックを入れてアップデートしていただけると幸いです。
4.7 => 5への以降に伴い、書き換えが必要になる場合
SANGOのテーマファイル内にもともと書かれているアイコンタグについては、書き換えは不要です。ご自身でアイコンタグを追加している場合、書き換えないとアイコンが表示されなくなる場合があります（互換性があるアイコンが使われている場合には書き換えは必要ありません）。
4.7と5の間で、特にソーシャル系アイコンの互換性がありません。例えば、Twitterアイコン <i class="fa fa-twitter"></i> は、5以降では<i class="fab fa-twitter"></i>という書き方をする必要があります。
書き換え方
新しいタグはFontAwesome5のアイコン一覧から探すことができます。
アイコンの詳細ページに表示されているタグを、旧タグと置き換えてください。
ポイント1：ウィジェット内でアイコンを使っている場合
ウィジェット内でアイコンタグ<i class="fa fa-○○"></i>を使用している場合には、書き換えが必要です。
1-1. サイドバーのプロフィール
特に「サイドバーにプロフィールを表示」のカスタマイズを行っている場合は、ソーシャルアイコンタグを書き換える必要があります（基本的には<i class="fa fa-○○"></i>を<i class="fab fa-○○"></i>に書き換えれば良いかと思います）。
1-2. メニューボックス
ウィジェット内で「メニューボックス」を使っている場合もアイコンがすべて表示されているか確認することをおすすめします。
ポイント2：メニュー
また、メニュー（外観⇒メニュー）内にアイコンタグが使われている場合も要注意です。特に「モバイルフッター固定メニュー」に表示されていないアイコンがないか確認しておくのが良いかと思います。
メニューの設定をしよう ポイント3：記事内
記事の中（テキストエディタ内）でアイコンタグを使っている場合、表示されなくなっている部分がないか確認することをおすすめします。例えば「”fa」という文字列などで記事検索をかけることで、効率的にアイコンが含まれている記事を探すことができる場合があります。
ポイント4：子テーマファイル内
SANGOの親テーマファイルは、自動でFontAwesome5のアイコンが使用される設計になっていますが、子テーマでカスタマイズを行っている場合、子テーマ内のコードに4.7⇒5への互換性がないアイコンタグが含まれている場合があります。
ポイント5：CSS内
子テーマのstyle.cssなどにおいて、疑似要素（:beforeや:after）でアイコンを表示している場合、書き換えが必要かもしれません。
例えば、font-family: FontAwesome;だった部分は、font-family: "Font Awesome 5 Free";に置き換える必要があります（ブランド系アイコンの場合にはfont-family: "Font Awesome 5 Brands";）。
さらにSolidタイプのアイコンを表示するときにはfont-weight: 900;を、Regularタイプのアイコンを表示するときにはfont-weight: 400;を合わせて指定する必要があります。
詳しくは、疑似要素でFontAwesome5のアイコンを表示するが参考になるかと思います。
置き換えがやっぱり億劫な場合
アイコンタグを多くの場所で挿入しているのであれば、置き換えは骨の折れる作業かもしれません。外観⇒カスタマイズ⇒詳細設定⇒「FontAwesome4.7を使用する」にチェックを入れることで、FontAwesome4.7の使用を継続することができます。
アイコンが表示されない場合
新アイコンであるため
FontAwesome5の中にも細かなバージョンがあり、ときどき新しいアイコンが追加されます。新しいアイコンを使うためにはFontAwesomeのバージョンを上げる必要があります。
例えば、SANGO v1.7ではFontAwesome5.6.1を使っていますが、FontAwesome5.7で新たにアイコンが追加された場合、そのままでは新アイコンは使えません。SANGOアップデート時にFontAwesomeファイルも最新のものに更新する予定です。
SANGOのアップデート前に新しいアイコンを使用したい場合、親テーマファイル内のlibrary/fontawesome5ディレクトリの中のCSSおよびフォントファイルを最新のものに置き換えてください。
有料のアイコンであるため
FontAwesomeのアイコン一覧には有料のアイコンも混じっています。アイコン詳細画面に「PRO」と表示されているアイコンは使用しても表示されないのでご注意ください。
はじめまして。いつも素晴らしいSANGOの運営お疲れ様です！
超絶一目惚れして先月から使わせていただいておりますm(*_ _)m
ひとつお聞きしたいのですが、以前の指差しアイコンは今回のver.アップで塗りつぶしのものにご変更されたのでしょうか？
塗りつぶされていない指差しアイコンの方が個人的に好みでして、先程Font Awesome5を使用する項目にチェックを入れ、アイコンタグを5のページからヘッダーお知らせ欄にコピペして貼り付けてみたのですがアイコンが表示されません。
こちらをコピペしました。
デフォルトで5が使われているということですので子テーマのheader.phpに読み込みタグを入れなくても良いのかなと思ったのですが、入れたほうが良いでしょうか？
ちなみに入れても入れなくても表示されませんでした；
CSSなどのキャッシュもクリア済みです。
私側の環境の問題なのでしょうか…？
お忙しいところ大変恐縮ですが、よろしければご教授いただけますと幸いです。
以前の指差しアイコンは今回のver.アップで塗りつぶしのものにご変更されたのでしょうか？
⇒ そちらはFontAwesome4.7から5に伴う変更です（同じ名前のアイコンの見た目が変わってしまった形ですね）。
ヘッダーお知らせ欄にコピペして貼り付けてみたのですがアイコンが表示されません。
⇒ こちら調べたところ、カスタマイザーにおいて、アイコンタグ含むHTMLをフィールド内に入れられない設定になっておりました。
v1.7.2で修正するため、ご迷惑をおかけして申し訳ありませんが、今しばらくお待ちください。
なお、別途FontAwesome5の読み込みタグを入れる必要はありません（二重で読み込まれて重くなってしまいます）。
なるほどです！
先程記事本文中で使用するとそちらは正常に表示されました。
迅速にご返事いただきありがとうございました！助かりました。
大変だとは存じますが、これからも運営頑張ってくださいm(*_ _)m
v1.7.2にて修正しました。
お手数ですが「ダッシュボード」⇒「更新」⇒一番下までスクロールして「SANGO」にチェックを入れてアップデートしていただけると幸いです。
ありがとうございました！
更新後無事ヘッダーお知らせ欄に表示されましたm(_ _)m
アップデート版の作業お疲れ様です。
しばらくの間fontawesome4.7を使用したいのですが、チェックを外して公開しても、サイトにはfontawesome 5が表示されてしまいます。
カスたマイザーを見ると、外したはずのチェックが再び入った状態に戻ってしまっていました。何度やってもこうなります。なぜでしょうか？
特にキャッシュ系のプラグイン等は入れていません。悪さをしそうなプラグインの停止やブラウザのキャッシュの消去なども試みましたが、ダメです。
ちなみにwordpressは4.9.9のままです。5.0にアップグレードした方が良いでしょうか？そこは関係ないですかね？
なるほど。以下の点をご確認いただけますか？
– その他のチェックボックスは保存できるか
– ブラウザのキャッシュを削除しても保存できないか
– 親テーマを有効化しても保存できないか
また、ご利用サーバーと、使用ブラウザも教えていただけると嬉しいです。
私も同じ現象が起きています。
その他のチェックボックスは保存可能で、ブラウザのキャッシュも削除しました。
また、親テーマを有効にしても保存できませんでした。
サーバーはエックスサーバーでブラウザはSafariとChrome両方試しましたが両方とも保存できません。
本件、ご迷惑をおかけして申し訳ありません。
v1.7.3のリリースにて修正しました。
お手数ですが「ダッシュボード」⇒「更新」⇒一番下までスクロールして「SANGO」にチェックを入れてアップデートしていただけると幸いです。
調査したところ、カスタマイザーの構造に問題がありました。
v1.7.3のリリースにて修正したので、「ダッシュボード」⇒「更新」⇒一番下までスクロールして「SANGO」にチェックを入れてアップデートしていただけると幸いです。
ご迷惑をおかけして申し訳ありません。
アップデートお疲れ様です。
一部のアイコンが「□」に表示になってしまいました。多分バージョン「Ver1.7.3」にアップデートしてなってしまいました。
改善方法はありますか？
またバージョンを戻す方法など教えていただけたら幸いです。
よろしくお願い致します。
この記事に書かれている通り、外観⇒カスタマイズ⇒詳細設定の「FontAwesome4.7を使用する」オプションにチェックを入れることで、アイコンが表示されるようになるはずです。
FontAwesome5を使用する場合は、□になってしまっている部分のコードの置き換えが必要です。
必須プラグインなどがFontAwesome4.7にしか対応していない場合、FontAwesome4.7を使うのが良いと思います。
上記の設定さえすれば、その他の問題は発生しませんが、それでもバージョンを戻したいですか？
また、バックアップは取られていますか？
『外観⇒カスタマイズ⇒詳細設定の「FontAwesome4.7を使用する」オプションにチェックを入れる』こともやってみたのですが、今度は別のアイコンが「□」になります。
あまりHPの知識とVer.1.7.3のアップデートが理解していなくご質問させてください。
● 今僕のサイトのアイコンは「FontAwesome4.7」と「FontAwesome5」がごちゃまぜになっているということですか？
● Ver.1.7.2のバージョンの時は、問題なく表示されていたのですが、それはなぜですか？
● Ver.1.7.3は「FontAwesome4.7」にしか対応しないということですか？
● カスタマイズ設定の「FontAwesome4.7を使用する」にチェックを入れると『FontAwesome5』に対応になるということでしょうか？
知識不足で、ご迷惑をおかけして申し訳ございません。対応お待ちしています。
● 今僕のサイトのアイコンは「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（？）のアップデートをお待ちください。
ご丁寧・速やかな対応に感謝しています。
正しいやり方かわかりませんが、
● 外観⇒カスタマイズ⇒詳細設定の「FontAwesome4.7を使用する」オプションにチェックを入れる
その後、
● 外観⇒カスタマイズ⇒追加CSSにて
.fa, .far, .fas {
font-family: FontAwesome;
}
こちらを入力したら元に戻りました(それでも表示されていないアイコンは記事のやり方とFontAwesome4.7のURLからコードを持ってきて置き換えしました)
僕の知識不足でお手数をおかけして申し訳ございません。4.7と5がごちゃまぜになっているやつは自分なりに勉強しながら整理してみたいと思います。
問題があった時は、Ver.1.6に戻したり、バックアップは毎回しっかりするよう心がけます！
SANGOやPORIPUに出会えたおかげで、HPが自分でカスタマイズできる喜び・楽しさを日々実感しています。それと速やかな対応のおかげで問題解決もしっかりできることに本当に感謝です。
今後もワクワクするようなアップデートを心よりお待ちしています。
ご報告ありがとうございます。
いえ、こちらこそお手数をおかけして恐縮です。
今後ともよろしくお願い致します。
いつもお世話になっています。
FontAwesome5に設定しているのですが、シェアボタンのアイコンの変え方を教えていただきたいのですがよろしくおねがいします。