Dashicons图标

WordPress后台调用 和 禁用 Dashicons 字体图标方法

大家好,我是雷锋哥。有时候帮人写 WordPress 后台功能需要在功能菜单添加图标,这里教大家可以引用 Dashicons 字体图标,你无需单独引用其它图标文件。从 WordPress 3.8 开始后台的管理菜单就支持了Dashicons 字体图标,作为主题或插件开发者,也应该与时俱进。

wordpress图标文件

关于 Dashicons

Dashicons 是一个开源的字体图标项目,目前托管于 GitHub,目前主要用于 WordPress 后台,当然, 你也可以在自己的主题或插件中使用。

查看Dashicons 字体图标:https://developer.wordpress.org/resource/dashicons/

如何使用?

在自定义文章类型中使用 Dashicons

如果我们使用 ‘dashicons-images-alt2’ 作为菜单的图标,那么相关代码就应该如下:

register_post_type('slides', array( 'labels' => array( 'name' => 'Slides', 'singular_name' => 'Slide' ), 'public' => true, 'has_archive' => true, 'menu_icon' => 'dashicons-images-alt2' ) );

在插件顶级菜单中使用 Dashicons

你还可以在创建插件菜单时使用 Dashicons ,比如下面使用 add_menu_page() 函数添加一个顶级菜单:

add_menu_page( 'Menu Page Title', 'Menu Title', 'manage_options', 'menu-slug', 'mytheme_menu_callback', 'dashicons-wordpress' // Dashicon 图标的CSS类 );

上面的两种代码应该算是比较常用的,其余的位置应该很少会用到了。

禁用 Dashicons

相反,如果不想要后台加载 Dashicons ,我们也是可以禁用,能减少30kb左右的样式文件加载,提高后台速度,打开主题 functions.php 文件,添加下面的代码:

// remove dashicons
function wpdocs_dequeue_dashicon() {
if (current_user_can( 'update_core' )) {
return;
}
wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );

需要注意的是,如果你的主题有用到 Dashicons 图标,那么不建议禁用哦,会导致无法显示图标,错位。

其他文章推荐:

Scroll to Top