WordPress Dashicons官方后台字体图标使用教程

WordPress Dashicons 是一组专门为 WordPress 管理后台界面设计的图标字体。这些图标在 WordPress 的后台管理界面中广泛使用，例如在菜单栏、设置页、工具栏以及其他界面元素中。Dashicons 的设计旨在提供一致且易于识别的视觉元素，以帮助用户更有效地导航和使用 WordPress 的各种功能。

关于 WordPress Dashicons

由于它们是以字体的形式呈现，Dashicons 具有易于扩展和样式调整的优点，这意味着它们可以轻松地调整大小而不会失真，并且可以通过 CSS 进行样式化。此外，由于它们是以字体形式内嵌，因此加载速度快，对性能的影响较小。

WordPress 开发者和设计师经常使用 Dashicons 来增强他们的插件或主题的后端用户界面，使其与 WordPress 核心的视觉风格保持一致。随着时间的推移，WordPress 团队会不定期更新和扩展 Dashicons 图标集，以涵盖新的功能和设计趋势。

WordPress Dashicons 用处

1.后台管理菜单：Dashicons 通常用于 WordPress 的后台管理菜单中，为不同的菜单项提供直观的图标。

2.插件和主题开发：开发者在创建自定义插件和主题时，可以使用 Dashicons 为其添加专业且一致的用户界面元素。

3.文章和页面编辑：在文章和页面的编辑界面中，Dashicons 可用于格式化工具栏，为不同的编辑功能提供图标。

4.小工具和侧边栏：在小工具和侧边栏的自定义设置中，Dashicons 可用于增强视觉效果和用户体验。

5.自定义文章类型：创建自定义文章类型时，可以使用 Dashicons 为其指定一个独特的菜单图标。

6.元数据和用户界面元素：在各种元数据字段（如日期、作者信息等）和用户界面元素（如按钮、提示框等）旁边使用 Dashicons，可以提供更丰富的视觉提示。

7.响应式设计和移动界面：由于 Dashicons 是矢量图标，它们非常适合于响应式设计和移动设备上的显示，确保在不同屏幕尺寸和分辨率下都能保持清晰。

8.自定义管理界面：对于那些需要自定义 WordPress 后台管理界面的开发者来说，Dashicons 是一个很好的资源，可以帮助他们创建一致且直观的用户体验。

WordPress Dashicons 使用教程

后台菜单项可以通过 register_post_type()和 add_menu_page()添加，这两个函数都有设置图标的选项。要显示当前图标，你应该传入’dashicons-id-alt’。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//自定义文章类型使用链接图标
add_action( 'init', 'fanly_create_post_type', 0 );
function fanly_create_post_type() {
	register_post_type( 'surl',
		array(
			'labels' => array(
				'name' => '短链',
				'singular_name' => '短链'
			),
			'public' => true,
			'menu_icon' => 'dashicons-admin-links',//这里就是 Dashicons 图标的调用
		)
	);
}

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

1
2
3
4
5
6
7
8
9
10
11

//添加后台自定义菜单使用齿轮图标
function fanly_add_custom_menu() {
	add_menu_page(
		'Fanly',
		'Fanly Basic',
		'manage_options',
		'fanly-basic',
		'fanly_basic_function',
		'dashicons-admin-generic' //这里就是 Dashicons 图标的调用
	);
}

CSS/HTML 使用方法

如果你想在管理界面的菜单之外使用 dashicons，有两个辅助类可以使用。这些是 dashicons-before 和 dashicons，它们可以被视为是设置 dashicons 的方式（因为你还需要你的图标的类）。

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

1

<h2 class="dashicons-before dashicons-smiley">A Cheerful Headline</h2>

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

1

<h2><span class="dashicons dashicons-smiley"></span> A Cheerful Headline</h2>

区块使用

区块编辑器支持将 dashicons 用作区块图标以及作为其自身的组件。

1
2
3
4
5
6
7
8
9

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

为区块添加图标。registerBlockType 函数接受一个“icon”参数，可以指定一个 dashicon 的名称。提供的示例是缩略的。完整示例请参见区块编辑器手册。

1
2
3
4
5
6
7
8

import { Dashicon } from '@wordpress/components';
const MyDashicon = () => (
    <div>
        <Dashicon icon="admin-home" />
        <Dashicon icon="products" />
        <Dashicon icon="wordpress" />
    </div>
);

将图标用作组件。提供了专用的 Dashicon 组件。具体的相关文档大家只能去 WordPress 官方查看区块编辑器手册。这里子凡就不继续拓展了。

WordPress Dashicons 官方地址：https://developer.wordpress.org/resource/dashicons/

至此已经是子凡本次分享的所有内容，部分代码参考 WordPress 官方，仅供大家学习参考！其主要作用是如果大家开发 WordPress 后台相关的功能时，可以尽可能的选择官方提供的图标更为方便，从而避免了图标样式与 WordPress 后台本身图标风格不统一的情况。

更多关于WordPress优化及疑问可以添加留言

w.haolusi.com

wordpress-dashicons.html