ルクセリタスのメニューにアイコンフォントを使う方法

ルクセリタスで使えるアイコンフォントは、「Material Icons」と「Font Awesome」の2種類あります。
「Material Icons」はGoogleが提供するアイコンフォントで、「Font Awesome」に比べて軽い事から、ルクセリタスVer.3.18.0から利用可能になりました。
「Font Awesome」での設定は以下をご覧ください。
今回は、新しく使えるようになった「Material Icons」での設定方法ですが、とても簡単です。
グローバルナビにアイコンフォント
アイコンフォントの有効化
「Luxeritas 」→「カスタマイズ」→「アイコンフォント」
Material Icons を有効化
※デフォルトで有効になっています。
「Material Icons」の下のチェック項目オプションはアイコンのデザインになります。
初期値は Outlined(白抜き) + Filled(塗りつぶし)。通常はこのままでいいと思います。
Rounded と Sharp はアイコンによると思いますが、上記サンプルの「おうちアイコン」の場合は見た目変わりません。
Two tone は2色になります。
メニューの編集
「外観」→「メニュー」から編集します。
アイコンフォントを表示したいメニューを選択します。
Material Icons選択
Material Iconsから利用するアイコンを選びます。
表示されるコードをコピーします。
WordPressメニューに戻り対象の項目を開きます。
ナビゲーションラベルの部分にコピーしたコードを貼り付けます。
「メニュー」を保存を押せば完了です。
関連記事
Posted by 綾糸
タグ
関連記事


コピペで簡単!BOXデザインCSS・シンプル~アイコンフォント利用まで
コピペで簡単!シンプルだけど使えるボックスデザインです。 画像枠としても使えるボ ...


アイコンフォントFont Awesome 6の使い方・向きやサイズ、動き設定
Font Awesome Ver.6 について 2020年6月 Font Awe ...


グローバルメニューにプラグインなしでアイコンフォントを表示する
ワードプレスのグローバルメニューにアイコンフォントを表示する方法です。 通常の「 ...


Font Awesomeアイコンフォントのサイズ・向き等の変更とコードが消える対処法
当サイトでは Ver.5以降を使用しており、記事もすべて同様のバージョンでの利用 ...


Font Awesomeアイコンフォント-バージョン4.7の使い方
利用方法 現時点では、バージョンは v ...
ディスカッション
コメント一覧
まだ、コメントがありません