Ver1.7.8 Released !

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

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」と表示されているアイコンは使用しても表示されないのでご注意ください。

20 COMMENTS

ニシヤマ 2019/03/07

fontawesome本家をのぞいてみると最新はVersion: 5.7.2となっていますが
sangoでのバージョンはいくつになるのでしょうか?

回答を見る
としま 2018/12/25

いつもお世話になっています。
FontAwesome5に設定しているのですが、シェアボタンのアイコンの変え方を教えていただきたいのですがよろしくおねがいします。

回答を見る
えあん 2018/12/21

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

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

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

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

回答を見る
みどなり 2018/12/20

アップデート版の作業お疲れ様です。

しばらくの間fontawesome4.7を使用したいのですが、チェックを外して公開しても、サイトにはfontawesome 5が表示されてしまいます。

カスたマイザーを見ると、外したはずのチェックが再び入った状態に戻ってしまっていました。何度やってもこうなります。なぜでしょうか?

特にキャッシュ系のプラグイン等は入れていません。悪さをしそうなプラグインの停止やブラウザのキャッシュの消去なども試みましたが、ダメです。

ちなみにwordpressは4.9.9のままです。5.0にアップグレードした方が良いでしょうか?そこは関係ないですかね?

回答を見る
岸田ゆり 2018/12/20

はじめまして。いつも素晴らしいSANGOの運営お疲れ様です!
超絶一目惚れして先月から使わせていただいておりますm(*_ _)m

ひとつお聞きしたいのですが、以前の指差しアイコンは今回のver.アップで塗りつぶしのものにご変更されたのでしょうか?
塗りつぶされていない指差しアイコンの方が個人的に好みでして、先程Font Awesome5を使用する項目にチェックを入れ、アイコンタグを5のページからヘッダーお知らせ欄にコピペして貼り付けてみたのですがアイコンが表示されません。
こちらをコピペしました。

デフォルトで5が使われているということですので子テーマのheader.phpに読み込みタグを入れなくても良いのかなと思ったのですが、入れたほうが良いでしょうか?
ちなみに入れても入れなくても表示されませんでした;
CSSなどのキャッシュもクリア済みです。
私側の環境の問題なのでしょうか…?

お忙しいところ大変恐縮ですが、よろしければご教授いただけますと幸いです。

回答を見る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です