大家好,我是雷锋哥。有时候帮人写 WordPress 后台功能需要在功能菜单添加图标,这里教大家可以引用 Dashicons 字体图标,你无需单独引用其它图标文件。从 WordPress 3.8 开始后台的管理菜单就支持了Dashicons 字体图标,作为主题或插件开发者,也应该与时俱进。
关于 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 图标,那么不建议禁用哦,会导致无法显示图标,错位。
其他文章推荐: