「ボックスメニュー」でFont Awesomeにないアイコンを設定する方法

はじめに

「ボックスメニュー」では、Font Awesomeのアイコンを設定できますが、使用したいアイコンが用意されていない場合もあります。

そこで、アイコンが未設定の場合に表示される星アイコンを、任意のアイコンに変更します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

参考：「アイコン」ブロックの標準アイコンを利用する方法

WordPress 7.1に標準搭載されているアイコンをCSSで適用する場合、コアで用意されているパス（/wp-includes/images/icon-library/）をmask-imageに指定します。

実装手順

以下のコードをstyle.cssに追加します。

.box-menu-icon > .fa-star:before {
  background-color: currentColor;
  content: '';
  display: block;
  height: 40px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 40px;
}

.box-menu[href*="ameblo"] .box-menu-icon > div:before {
  mask-image: url('/wp-includes/images/icon-library/plus.svg');
}

「アイコン」ブロックに追加した独自SVGアイコンを利用する方法

以下の記事では、独自のSVGアイコンを追加する方法を紹介しました。

「アイコン」ブロックに独自SVGアイコンを追加する方法

「WordPress 7.1で追加された仕組みを活用して、自作のSVGアイコンを管理画面から登録する方法」を解説。アイコンの追加・削除やSVGファイルのアップロード、データベースへの保存、アイコンコレクションへの登録まで、実装に必要なコードとポイントを分かりやすく紹介します。

chuya.s239.xrea.com

自作のカスタムアイコン管理機能などでアップロードしたSVGファイル（例: /wp-content/uploads/custom-icons/star.svg）を使って、mask-imageにパスを指定します。

実装手順

以下のコードをstyle.cssに追加します。

.box-menu-icon > .fa-star:before {
  background-color: currentColor;
  content: '';
  display: block;
  height: 40px;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 40px;
}

.box-menu[href*="ameblo"] .box-menu-icon > div:before {
  mask-image: url('/wp-content/uploads/custom-icons/star.svg');
}

さいごに

今回紹介した方法を使えば、Font Awesomeに用意されていないアイコンも、画像とCSSを利用して「ボックスメニュー」に設定できます。

オリジナルのアイコンを使用することで、サイトのデザインや用途に合わせたボックスメニューを作成できます。