SANGOをアップデートしてアイコンが消えた場合の対処法

前回の記事を書いてから7ヶ月も経ってしまいました・・・。

爺さんになるまで続けたいと書いておきながら、これは1年後も怪しい・・・。

というわけで、しばらくSANGOのアップデートをしていなかったので、本日バージョン1.4から1.7.6にアップデートしました。

アップデート作業には何の問題もありませんでしたが、一部のアイコンが表示されなくなったので、その対処法を書いておきます。

どこのアイコンが消えた?

当ブログでは以下のアイコンが消えました。

サイドバープロフィールのTwitterアイコン

モバイルフッター固定メニューのアイコン

消えたアイコンを再表示させる手順

何で消えたのかは分からないし、その原因にも興味はない。表示できればいいんだ!という方は以下の変更を行うだけでOKです。

変更内容

外観 > ウィジェット > サイドバー > プロフィール用のカスタムHTML

「内容」に入力されている以下の文字を変更します。

変更前
<i class="fa fa-twitter"></i>
変更後
<i class="fab fa-twitter"></i>

外観 > メニュー > モバイルフッター固定メニューに対応するメニューを選択

各メニュー項目のカスタムリンクを展開し、ナビゲーションラベルに設定されている文字を変更します。

変更前
<i class="fa fa-thumb-tack"></i>フォロー
<i class="fa fa-level-up"></i>トップ
変更後
<i class="fas fa-thumbtack"></i>フォロー
<i class="fas fa-level-up-alt"></i>トップ

変更後の表示

サイドバープロフィールのTwitterアイコン

モバイルフッター固定メニュー

ちゃんと表示されました。

なぜアイコンが消えた?

原因

アイコンが消えたのは、SANGOが利用しているFontAwesomeのバージョンが4.7から5に変わったためです。(SANGO v1.7より)

クラス名(※)が変更されているアイコンの場合、これまでの記述では対応するアイコンが存在しないため、表示されなくなったわけです。
※上記変更コードにおけるclass=”AAA”のAAA部分

詳しくは以下のリンク先をご覧ください。

参考 SANGOでFontAwesome4.7から5へと切り替える方法と注意点サルワカ

消えなかったアイコンもついでに変更

当ブログでは、以下のアイコンは消えませんでしたが、併せて変更しておきました。

  • サイドバープロフィールのRSSアイコン
  • メインメニューの各アイコン
  • モバイルフッター固定メニューのホーム、シェア、メニューアイコン

先ほど変更したアイコンも含めて、今回変更した部分を全て書いておきますね。

サイドプロフィール

外観 > ウィジェット > サイドバー > プロフィール用のカスタムHTML > 内容

変更前
<i class="fa fa-twitter"></i>
<i class="fa fa-rss"></i>
変更後
<i class="fab fa-twitter"></i>
<i class="fas fa-rss"></i>

モバイルフッター固定メニュー

外観 > メニュー > モバイルフッター固定メニューに対応するメニューを選択 > メニュー構造 > カスタムリンク > ナビゲーションラベル

変更前
<i class="fa fa-home"></i>ホーム
<i class="fa fa-share-alt"></i>シェア
<i class="fa fa-thumb-tack"></i>フォロー
<label for="drawer__input"><i class="fa fa-list-ul" aria-hidden="true"></i>メニュー</label>
<i class="fa fa-level-up"></i>トップ
変更後
<i class="fas fa-home"></i>ホーム
<i class="fas fa-share-alt"></i>シェア
<i class="fas fa-thumbtack"></i>フォロー
<label for="drawer__input"><i class="fas fa-list-ul" aria-hidden="true"></i>メニュー</label>
<i class="fas fa-level-up-alt"></i>トップ

メインメニュー

外観 > メニュー > メインメニューに対応するメニューを選択 > メニュー構造 > 固定ページ > ナビゲーションラベル

変更前
<i class="fa fa-sitemap" aria-hidden="true"></i>サイトマップ
<i class="fa fa-user" aria-hidden="true"></i>プロフィール
<i class="fa fa-user-secret" aria-hidden="true"></i>プライバシーポリシー
<i class="fa fa-envelope" aria-hidden="true"></i>お問い合わせ
変更後
<i class="fas fa-sitemap" aria-hidden="true"></i>サイトマップ
<i class="fas fa-user" aria-hidden="true"></i>プロフィール
<i class="fas fa-user-secret" aria-hidden="true"></i>プライバシーポリシー
<i class="fas fa-envelope" aria-hidden="true"></i>お問い合わせ
MEMO
使用しているアイコンが違う場合は、FontAwesomeで調べると分かります。

参考 IconsFont Awesome

 

コメントを残す

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