如何在可湿性粉剂管理仪表板菜单中添加字体强大的5个图标?

时间:2019-05-06 作者:mcphersonjr

如果您当前正在或打算开始在主题中使用Font Awesome来获取仪表板菜单的图标,但您想要使用的图标是Font Awesome 5,而版本4的实现不适用于较新的图标。你可能也在问自己同样的问题。。。

如何在WP Admin dashboard菜单中添加Font Awesome 5图标

正如你所知,我计划回答我自己的问题,因此在问题部分将没有代码或示例,因为你需要知道的一切都将在答案中。

1 个回复
最合适的回答,由SO网友:mcphersonjr 整理而成

就像Font Aweome 4一样,您可以将样式排列在主题中,以便在管理页面上生效。这允许您获得所需的样式,以便使用字体很棒的图标。只需根据需要为版本5更新您的函数。

下面是一个如何将字体可怕样式排队的示例:

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短划线图标替换为字体很棒的图标。

下面是一个如何覆盖默认破折号图标的示例:

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-family 更改Font Aewome 5所需的内容,但更具体地说,请注意font-weight 这是特定图标所需的。更清楚地说,您可以在Font Awesome cheat sheet 图标分为实体、常规和品牌三部分。实心图标和普通图标都使用相同的字体系列,但是您需要为这两种图标类型指定不同的权重。固体用途font-weight: 900 和常规用途font-weight: 400. 没有这些你的字体可怕的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\');
在上面的示例中,自定义的post类型是Cars,这为破折号图标提供了menu-icon-cars 它被content: "\\\\f1b9".

相关推荐