wordpress的后台图标库dashicons

wordpress后台有许多精致的图标，这些图标是由一个名为dashicons的图标库实现的，目前这套图标大约包含300多个icon。即便将之应用于前端，也是绰绰有余。

官方的图标总览页面

https://developer.wordpress.org/resource/dashicons/#admin-home

文件地址

通过以下路径可以访问到这个文件，下载后的大小大约为40多kb，对于不需要大量图标符号的站点来说，这个体积还是有点大了。

https://站点域名/wp-includes/css/dashicons.min.css

前台使用这套图标

在functions.php文件末尾添加如下语句：

function load_dashicons(){
    wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'load_dashicons');

利用wp_head()函数输出之后会在head部分发现如下语句，因为版本不同，图标库的版本号会有不同，请忽略：

<link rel='stylesheet' id='dashicons-css'  href='https://站点域名/wp-includes/css/dashicons.min.css?ver=4.5.28' type='text/css' media='all' />

获取了文件的真实地址，当然也可以直接自行组装文件地址，以避免使用wp_head()。

前端图标的调用

图标的类名可以参考官方的图标总览页面，例如可以用下列语句实现一个地球图标：

<span class="dashicons dashicons-admin-site"></span>

后台管理菜单项

管理菜单项可以添加register_post_type()和add_menu_page()，这两个选项都可以设置图标。要显示当前图标，您应该传入'dashicons-admin-home'。

register_post_type示例

在register_post_type()中，在arguments数组中设置menu_icon。

<?php
/**
 * Register the Product post type with a Dashicon.
 *
 * @see register_post_type()
 */
function wpdocs_create_post_type() {
    register_post_type( 'acme_product',
        array(
            'labels' => array(
                'name'          => __( 'Products', 'textdomain' ),
                'singular_name' => __( 'Product', 'textdomain' )
            ),
            'public'      => true,
            'has_archive' => true,
            'menu_icon'   => 'dashicons-products',
        )
    );
}
add_action( 'init', 'wpdocs_create_post_type', 0 );

add_menu_page示例

函数add_menu_page()在图标URL的回调函数之后接受一个参数，它也可以接受一个dashicons类。

<?php
/**
 * Register a menu page with a Dashicon.
 *
 * @see add_menu_page()
 */
function wpdocs_add_my_custom_menu() {
    // Add an item to the menu.
    add_menu_page(
        __( 'My Page', 'textdomain' ),
        __( 'My Title', 'textdomain' ),
        'manage_options',
        'my-page',
        'my_admin_page_function',
        'dashicons-admin-media'
    );
}