### [在 WordPress 中使用 Dashicons：综合指南](https://www.prosaas.cn/article/192)

**Published:** 2023-09-20T01:49:01

**Author:** 5201314

**Excerpt:** Dashicons 是一组与 WordPress 捆绑在一起的字体图标，提供了一种向 WordPress 网站…

Dashicons 是一组与 WordPress 捆绑在一起的字体图标，提供了一种向 WordPress 网站添加图标的简单方法。自该项目首次推出以来，它已发展成为一种宝贵的资源，包括丰富的 300 多个独立图标！

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212114600649.png)

Dashicons 易于使用，涵盖了大多数图标需求的用例，因此减少了对第三方图标库的需求。

**有趣的事实：**每次您访问 Dashicons 主页时，它都会显示一个随机图标！亲自尝试一下。

## **什么是字体图标？**

字体图标正如其听起来的样子。每个字体图标集（例如 Dashicons）都是常规字体，就像任何其他字体一样，但包含符号而不是字母和数字。

这使它们易于使用，但 Dashicons 的一个缺点是它们被有效地编译为单个大精灵（包含所有单独图标的排列好的单个大图像）。

正如您可以想象的那样，图标集合越大，字体图标精灵的整体大小也越大。即使使用缓存，如果您只需要一两个图标，包含每个图标也并不理想。

但是，这并没有阻止字体图标在过去几年中非常流行。

## **在 WordPress 中访问 Dashicons**

好消息是 Dashicons 包含在 WordPress 核心中，因此它们可以开箱即用。它们实际上会自动添加到每个 WordPress 管理页面，因此您无需做太多工作即可使用它们。

但是，如果您打算在网站的前端显示 Dashicons，那么在尝试使用它们之前需要先将它们排队。

要在网站前端启用 Dashicons，请将其添加到插件或主题中：

function enable\_frontend\_dashicons() {
  wp\_enqueue\_style( 'dashicons' );
}
add\_action( 'wp\_enqueue\_scripts', 'enable\_frontend\_dashicons' );

现在我们已经准备好开始在我们的 WordPress 网站上使用 Dashicons！

## **如何显示 Dashicons**

现在是您一直在等待的部分！根据您的要求，可以通过几种不同的方式将 Dashicons 添加到您的网站：

-   WordPress 管理菜单中的自定义插件图标
-   插件设置页面标记的自定义图标
-   块图标组件
-   前端帖子或页面内容内的任何位置

### 为插件创建自定义菜单图标

如果您正在开发插件，那么您可以利用 WordPress 管理员中随时可用的 Dashicons，为您的插件显示自定义菜单图标，如果您愿意，还可以在插件设置页面上显示标题。

function htud\_add\_options\_page() {
  add\_menu\_page(
    'How to use Dashicons',
    'How to use Dashicons',
    'manage\_options',
    'how-to-use-dashicons',
    'htud\_render\_settings\_page',
    'dashicons-superhero-alt' // Add Dashicon to menu.
  );
}
add\_action('admin\_menu', 'htud\_add\_options\_page');

function htud\_render\_settings\_page() {
  // Add Dashicon to settings page title.
?>
<div class="wrap" style="display:flex;align-items:baseline;">
    <span class="dashicons dashicons-admin-site"></span>
    <h1 class="heading"><?php \_e( 'Settings Page', 'text-domain' ); ?></h1>
  </div>
  <?php
}

这就是它在 WordPress 管理员中的样子：

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212114600883.png)

您还可以在管理菜单中使用 Dashicons 来自定义帖子类型。

function custom\_post\_type() {
  $args = array(
      'label' => \_\_( 'My Custom Post Type', 'text\_domain' ),
      'show\_ui' => true,
      'menu\_icon' => 'dashicons-drumstick', // Add Dashicon to custom post type menu.
  );
  register\_post\_type( 'My Custom Post Type', $args );
}
add\_action( "init", "custom\_post\_type" );

这会为您的自定义帖子类型添加一个菜单图标，类似于上面的设置页面示例。

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212114600731.png)

### 在古腾堡块中使用 Dashicons

如果您为古腾堡编辑器开发块，您还可以通过 `<Dashicon/ >` 组件直接在代码中使用 Dashicons。

该组件非常易于使用。只需导入它并将其添加到块中，如下所示：

import { useBlockProps } from '@wordpress/block-editor';
import { Dashicon } from '@wordpress/components';

export default function Edit() {
  return (
    <div {...useBlockProps()}>
      <Dashicon icon="businessman" />
      <Dashicon icon="awards" />
      <Dashicon icon="pets" />
      <Dashicon icon="heart" />
    </div>
  );
}

这会将四个指定的 Dashicons 呈现在一行上。

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212114600561.png)

检查代码会显示 `477c5dc3edaf86ebdbb3f8dc928f52e1` 组件输出的实际标记，该标记是一个与 Dashicons 网站在您选择图标并单击**复制 HTML** 链接时生成的内容结构相同的 span 标记.

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212114600686.png)

### 使用核心 HTML 块添加 Dashicons

在您的网站上使用 Dashicons 的另一种方式是通过核心 HTML 块添加图标标记。这使您能够直接输入 Dashicon 标记。

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212114601588.png)

  
要在前端运行此功能，您必须按照前面所述手动将 Dashicon 字体排入队列。

## 结论

在这篇文章中，我解释了 Dashicons 是什么以及它们在 WordPress 中的工作原理。然后，我向您展示了将 Dashicons 包含在您自己的 WordPress 网站或插件中的几种方法。

以上就是在 WordPress 中使用 Dashicons：综合指南的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** html, WordPress, 子类

**Categories:** WordPress

---