CocoonからSWELLへテーマ変更したところ、モバイルフッターメニューに設定していたアイコンが、SWELL移行時に消えてしまったので設定を見直しました。
本記事ではSWELLテーマでアイコンを表示させる方法と「Font Awesome」（Webアイコンフォント）読み込み後にアイコン設定する方法の2パターンご紹介していきます。
SWELLテーマは今後も使い倒すつもりなので、備忘録として記事に残しておきます。
SWELLテーマ移行時にアイコンが非表示になる
CocoonテーマからSWELLテーマに移行時、モバイルフッターで設定していたアイコンが消えました…。
Cocoonでは「Font Awesome」（Webアイコンフォント）のアイコンを使用しており、SWELL移行時に「Font Awesome」を読み込みを行っていなかったことが原因で表示されなくなったという訳です。
モバイルフッターメニューにアイコン表示させる方法
モバイルフッターにアイコンを表示させる方法として、以下の2パターンでご紹介します。
- 「SWELLアイコン」を表示させる方法
- 「Font Awesome」を読み込み後にアイコン表示させる方法
それでは、それぞれの手順を見ていきましょう。
1.「SWELLアイコン」を表示させる
「Font Awesome」アイコンの代わりに、SWELLアイコンを表示させる方法です。
- モバイルフッター用メニューを選んで選択ボタンをクリック
- 「説明」にSWELLアイコンのショートコードを入力
※SWELL専用アイコン「icon-pen（）」を選びました - 「メニューを保存」をクリックして保存
SWELLアイコンは以下のリンクからショートコード一覧を確認できます。
2.「Font Awesome」読み込み後にCSSでアイコン表示させる
1.で説明したようにSWELLアイコンで設定を行いましたが、元々使用していた「Font Awesome」アイコンを使いたくなったので、CSSでカスタマイズを行いました。
設定手順は以下通りです。
SWELL設定から「Font Awesome」を読み込む
- SWELL設定をクリック
- Font Awesomeを選択
- CSSで読み込む
- v6またはv5どちらか希望のバージョンにチェックします
- 変更を保存をクリックして保存
メニューのliタグにclass名をつける
最初に解説したSWELLアイコンを表示させるよう説明欄にショートコードを入れている場合、SWELLアイコンが優先して表示されてしまいます。
説明欄は空欄にして、CSS class（オプション）に任意のクラス名をつけましょう。
カスタムCSSでアイコンを表示させる
- 外観➡カスタマイズ
- 追加CSSに以下のように記述
追加CSSの記述例
/* モバイルフッターアイコン */
.web-icon i:before {
content: “\f5fc”;/* WEBデザインアイコン */
font-family: “Font Awesome 6 Free”;
font-weight: 900;
font-style: normal; /* 斜体を解除 */
}
iタグはデフォルトで斜体になっていたため、font-style: normal;でフォントスタイルを通常に戻しました。
まとめ
今回はCocoonテーマからSWELLテーマ移行時にフッダーアイコンが表示されなくなった時の対処法、アイコン設置方法について説明しました。
「Font Awesome」でのアイコン設定は私が独自に行った方法です。
設定方法が複雑な気もするので、もっとスマートな方法をご存じの方いらっしゃいましたら、ぜひコメントなどで教えいただけると幸いです。
それでは、またお会いしましょう！
コメント