web-dev-qa-db-ja.com

WP管理ダッシュボードメニューにFont Awesome 5アイコンを追加する方法は？

現在、テーマでFont Awesomeを使用しているか、ダッシュボードメニューのアイコンを取得しようとしているが、使用したいアイコンがFont Awesome 5にあり、バージョン4の実装が新しいアイコンで機能しない場合。私が持っているのと同じ質問をあなた自身に尋ねているかもしれません...

WP管理ダッシュボードメニューにFont Awesome 5アイコンを追加するにはどうすればよいですか？

ご存知のように、私は自分の質問に答えるつもりです。知っておくべきことはすべて回答に含まれるため、質問セクションにはコードや例はありません。

plugin-developmenttheme-developmentadmin-menu
2
mcphersonjr

Font Awesome 4の場合と同様に、テーマのスタイルをエンキューして、管理ページで有効にすることができます。これにより、Font Awesomeアイコンを使用するために必要なスタイルを取得できます。バージョン5の必要に応じて関数を更新するだけです。

Font Awesomeスタイルをエンキューする方法の例を次に示します。

function fontawesome_dashboard() {
   wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.8.1/css/all.css', '', '5.8.1', 'all');
}

add_action('admin_init', 'fontawesome_dashboard');

さらに、上書きするスタイルを追加して、WordPressダッシュアイコンをFont Awesomeアイコンに置き換える必要があります。

デフォルトのダッシュアイコンを上書きする方法の例を次に示します。

function fontawesome_icon_dashboard() {
   echo '<style type="text/css" media="screen">
    icon16.icon-media:before, #adminmenu .menu-icon-media div.wp-menu-image:before {
      font-family: "Font Awesome 5 Free" !important;
      content: "\\f03e";
      font-style:normal;
      font-weight:400;
    }
        </style>';
 }
add_action('admin_head', 'fontawesome_icon_dashboard');

Font Awesome 5に必要なfont-familyの変更に注意してください。具体的には、特定のアイコンに必要なfont-weightに注意してください。より明確にするために、アイコンがセクションに分割されていることを Font Awesomeチートシート で確認できます。しっかりしたアイコンと通常のアイコンはどちらも同じフォントファミリーを使用しますが、両方のアイコンタイプに異なるウェイトを指定する必要があります。 Solidはfont-weight: 900を使用し、Regularはfont-weight: 400を使用します。これらがないと、Font Awesome 5のアイコンは機能しません。

ソリッドアイコンでカスタム投稿タイプをオーバーライドする例を次に示します。

function fontawesome_icon_dashboard() {
   echo '<style type="text/css" media="screen">
    icon16.icon-media:before, #adminmenu .menu-icon-media div.wp-menu-image:before {
      font-family: "Font Awesome 5 Free" !important;
      content: "\\f03e";
      font-style:normal;
      font-weight:400;
    }
    icon16.icon-media:before, #adminmenu .menu-icon-cars div.wp-menu-image:before {
      font-family: "Font Awesome 5 Free" !important;
      content: "\\f1b9";
      font-style:normal;
      font-weight:900;
    }
        </style>';
 }
add_action('admin_head', 'fontawesome_icon_dashboard');

上記の例では、カスタム投稿タイプはCarsで、ダッシュアイコンにmenu-icon-carsのクラスが指定されており、content: "\\f1b9"によってオーバーライドされています。

4
mcphersonjr