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

19 COMMENTS

アバター
だいどら7 2020/06/06

FontAwesome5にしたときのソーシャルアイコンの設定について

FontAwesome5にしたときの、SANGOの標準機能で表示されるソーシャルアイコンの設定変更(書き換え方法)をもっと具体的に教えてほしいです。

回答を見る
アバター
匿名 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が表示されない

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

回答を見る
アバター
えあん 2018/12/21

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

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

回答を見る

コメントを残す

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

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。