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

ルクセリタスで使えるアイコンフォントは、「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 綾糸
タグ
関連記事


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


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


Googleマテリアルアイコンの使い方とよく使うアイコンコード
GoogleのMaterial iconsは、無料で利用できるマテリアルデザイン ...


ページトップへ戻るボタンを簡単コピペ!5パターン
ページのトップへ戻るボタンをHTML1行と、簡単なC ...


横並びテーブルのようなメニューを作る-アイコンフォントでスマートに
今回は、サイドバーに表示するメニューボックスを作ってみます。 文 ...
ディスカッション
コメント一覧
まだ、コメントがありません