图标说明

Dashicons 是 WordPress 从 3.8 开始的官方图标字体，Dashicons 项目接受图标其他请求，项目由WordPress官方管理！

图标使用

WordPress 使用

WordPress 使用可以使用“register_post_type()”和添加管理菜单项“add_menu_page()”，它们都具有设置图标的选项。要显示当前图标，您应该传入“dashicons-align-full-width”

演示例子

在register_post_type()，设置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 );
<?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 );
<?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()在图标 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'
    );
}
<?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'
    );
}
<?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'
    );
}

CSS/HTML 用法

如果您想在菜单之外的管理员中使用破折号，可以使用两个帮助程序类。这些是dashicons-beforeand dashicons，它们可以被认为是设置 dashicons（因为你仍然需要你的 icon 的类）。

例子

使用类将图标添加到标题中dashicons-before。这可以直接添加到带有文本的元素中。

<h2 class="dashicons-before dashicons-smiley">你的标题</h2>
<h2 class="dashicons-before dashicons-smiley">你的标题</h2>
<h2 class="dashicons-before dashicons-smiley">你的标题</h2>

使用类将图标添加到标题中dashicons。请注意，在这里，您需要专门为图标添加额外的标记。

<h2><span class="dashicons dashicons-smiley"></span>你的标题</h2> 
<h2><span class="dashicons dashicons-smiley"></span>你的标题</h2> 
<h2><span class="dashicons dashicons-smiley"></span>你的标题</h2> 

块使用

块编辑器支持将短划线用作块图标和它自己的组件。

例子

将图标添加到块中。该registerBlockType函数接受一个参数“icon”，它接受一个破折号的名称。提供的示例被截断。请参阅块编辑器手册中的完整示例。

registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
    apiVersion: 2,
    title: 'Example: Basic (esnext)',
    icon: 'universal-access-alt',
    category: 'design',
    example: {},
    edit() {},
    save() {},
} );
registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
    apiVersion: 2,
    title: 'Example: Basic (esnext)',
    icon: 'universal-access-alt',
    category: 'design',
    example: {},
    edit() {},
    save() {},
} );
registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
    apiVersion: 2,
    title: 'Example: Basic (esnext)',
    icon: 'universal-access-alt',
    category: 'design',
    example: {},
    edit() {},
    save() {},
} );

使用图标作为组件。有一个专用Dashicon组件可用。请参阅块编辑器手册中的相关文档。

从“@wordpress/components”导入 { Dashicon }；
 
const MyDashicon = () => ( 
    <div> 
        <Dashicon icon="admin-home" /> 
        <Dashicon icon="products" /> 
        <Dashicon icon="wordpress" /> 
    </div> 
);
从“@wordpress/components”导入 { Dashicon }；
 
const MyDashicon = () => ( 
    <div> 
        <Dashicon icon="admin-home" /> 
        <Dashicon icon="products" /> 
        <Dashicon icon="wordpress" /> 
    </div> 
);
从“@wordpress/components”导入 { Dashicon }；
 
const MyDashicon = () => ( 
    <div> 
        <Dashicon icon="admin-home" /> 
        <Dashicon icon="products" /> 
        <Dashicon icon="wordpress" /> 
    </div> 
);

Photoshop 使用

为 Photoshop 模型使用 .OTF 版本的字体，网络字体版本将不起作用。要获得最准确的结果，请选择“Sharp”字体平滑。

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。