2.0 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のバージョンを上げる必要があります。

FontAwesome5のバージョンをあげる

SANGO v1.8.1から外観⇒カスタマイズ⇒詳細設定⇒「FontAwesome5の使用バージョン」から自由にFontAwesome5の使用バージョンを変更できるようになりました。

FontAwesome5のバージョン一覧はこちらのページから確認することができます。

最新のバージョンがあらかじめ選択されている。この画像の場合「5.8.1」が最新のバージョン番号

有料のアイコンであるため

FontAwesomeのアイコン一覧には有料のアイコンも混じっています。アイコン詳細画面に「PRO」と表示されているアイコンは使用しても表示されないのでご注意ください。

32 COMMENTS

匿名 2019/12/12

H2に指定したfontawesome5のアイコンがトップページのアイキャッチにも付いてしまう

素晴らしいワードプレステーマのご提供ありがとうございます。 3つ質問がございます。ご教授いただければ幸いです。 「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」を参照して スタイルシートでH2見出しのカスタマイズを行い、fontawesome5のアイコンを見出しに付属してみたところ、トップページの記事一覧のアイキャッチ画像の左にもfontawesome5のアイコンが付いてしまいまし…

回答を見る
マチノタケオ 2019/12/06

有料版FontawesomeのCSS記載が表示されない

有料版のFontawesomeを導入し、ヘッダー部分に必要な記述を記載しました。 以下の記載をし、ボックス内のタイトルにつけるアイコンを有料のアイコンに変更しようとしたところ、エラーになり□が表示されている状況です。 .box29 .box-title:before { padding-right: 4px; font-family: "Font Awesome 5 pro"; font-weig…

回答を見る
KATE 2019/09/13

フォローボタンにブランドアイコン以外も利用したい。

いつもお世話になっています。 質問なのですが、フォローボタン(follow_btnクラスの)にブランドアイコン以外も利用したいのですが、どうしたらいいでしょうか。 親テーマの方でfont-family: "Font Awesome 5 Brands";が指定されていたので、 この部分をfont-family: "Font Awesome 5 Free";に書き換えたり、子テーマの方で 指定し直した…

回答を見る
moerus 2019/08/05

Font awesome 5が表示されない

昨日質問したものですが、本日見てみたらもとに戻っていました。 戻った原因はわかりませんが、お騒がせしました。

回答を見る
moerus 2019/08/04

Font awesome 5が表示されない

お世話になっております。SANGOはきれいでとても気に入ってます。 1点伺いたいのですが、昨日までFont awesome 5が表示されていたのですが、今日になって突然文字化けしてしまうようになりました。 PORIPUを導入しています。 ブラウザはChromeとEdgeです。 ただ、iPhoneとMacBookのsafariで確認するとちゃんと表示されています。 このカスタマイズガイドのページも文…

回答を見る
ニシヤマ 2019/03/07

fontawesomeのバージョン

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

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

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

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

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

アップデートお疲れ様です。 一部のアイコンが「□」に表示になってしまいました。多分バージョン「Ver1.7.3」にアップデートしてなってしまいました。 改善方法はありますか? またバージョンを戻す方法など教えていただけたら幸いです。 よろしくお願い致します。

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

アップデート版の作業お疲れ様です。 しばらくの間fontawesome4.7を使用したいのですが、チェックを外して公開しても、サイトにはfontawesome 5が表示されてしまいます。 カスたマイザーを見ると、外したはずのチェックが再び入った状態に戻ってしまっていました。何度やってもこうなります。なぜでしょうか? 特にキャッシュ系のプラグイン等は入れていません。悪さをしそうなプラグインの停止やブ…

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

はじめまして。いつも素晴らしいSANGOの運営お疲れ様です! 超絶一目惚れして先月から使わせていただいておりますm(*_ _)m ひとつお聞きしたいのですが、以前の指差しアイコンは今回のver.アップで塗りつぶしのものにご変更されたのでしょうか? 塗りつぶされていない指差しアイコンの方が個人的に好みでして、先程Font Awesome5を使用する項目にチェックを入れ、アイコンタグを5のページからヘ…

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。