WordPress Dashicons：如何在 WordPress 网站中使用它们

已发表: 2022-10-14

您是想学习如何在 WordPress 中使用 Dashicons 的初学者吗？

Dashicons 是每个 WordPress 安装附带的图标字体（类似于 FontAwesome）。它是轻量级的，包含的图标足以让大多数用户避免安装第三方图标集。

默认情况下，Dashicon 仅在后端加载。但是，您可以使用简单的代码轻松地将 Dashicon 添加到前端。

现在每个主题开发人员都更喜欢使用 WP Dashicons 而不是图像，因为图标加载速度更快。

在本指南中，我们将向您展示如何在 WordPress 中使用 Dashicons。

什么是 WordPress Dashicon？

Dashicons 是 WordPress 的官方图标字体，在 3.8 版本中首次引入。如果您在您的网站上使用这些字体，它们看起来会很棒。它们是高质量的 SVG 文件，可以缩放到任何大小而无需像素化。

由于 WordPress 团队开发了它们，它们具有原生 WordPress 支持，并且可以在没有额外脚本的情况下使用。大约有 350 种图标字体可用，您可以在官方 WordPress 开发人员资源中找到这些字体。

您可以在以下位置使用这些图标：

WordPress 管理仪表板
导航菜单
页面和帖子
元数据
自定义插件和主题
前端设计

您可能已经注意到我们将 Dashicon 称为“字体图标”而不是“图标”。这是因为字体图标和常规图标之间存在差异。

图像图标和字体图标有什么区别？

字体图标和图像图标具有相同的用途。唯一的区别是它们是如何保存在服务器上的。

图像图标是您放置在网站各种元素上的微小图像。字体图标是浏览器转换为矢量图像的代码片段。

为什么使用 Dashicon？

出于多种原因，您应该使用字体图标 (Dashicons) 而不是图像图标。

它们默认是可扩展的，就像您的 WordPress 网站上的文本一样。这意味着无论用户的屏幕有多大，它们都会看起来不错。
Dashicons 也很轻巧。这意味着您的 WordPress 网站性能将比使用图像图标更快。
Dashicons，因为它们是文本，可以使用 CSS 进一步定制。您可以添加阴影、渐变色、动画等效果。
Dashicons 对于保持 HTTP 请求尽可能低也很有用，因为它们与其他字体同时加载。如果您在网站上使用大量图像，则必须发出大量请求才能获取它们，这会增加页面加载时间。

如何在 WordPress 中使用 Dashicon？

不用担心。使用 Dash 图标不需要高级编码技能。按照以下步骤操作，您很快就会在您的 WordPress 网站上拥有 Dashicon。

在前端启用 WordPress Dashicons

在使用 WP Dashicons 之前，您必须首先为您使用的主题启用它们。这是通过在functions.php文件中添加一个小代码片段来完成的。

首先，您需要从 WordPress 管理仪表板转到外观 » 主题编辑器。

现在，从右侧的文件列表中查找functions.php文件。

接下来，向下滚动到 functions.php 的底部并添加以下代码：

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

在编辑 functions.php 之前，我们建议创建一个子主题。如果您直接编辑主题文件然后更新主题，更新将覆盖您对functions.php 所做的任何更改。因此，有一个儿童主题总是更好。

而已！您现在已准备好开始使用 WP Dashicons。接下来，我们将向您展示如何获取 Dashicons HTML 和 CSS 代码。

如何获取 Dashicons HTML 和 CSS 代码

WordPress.org 有一个 Dashicon 库，您可以在其中获取每个图标的 CSS 和 HTML 代码。

只需转到 WordPress 开发人员资源页面。在这里，您将看到可用 Dashicon 的列表。

接下来，单击您可能要用于您的站点的图标。

然后，根据您的需要，选择Copy HTML或Copy CSS 。

单击后，将出现一个带有代码的弹出窗口。只需将代码复制到剪贴板即可。

现在，当您启用 Dashicons 并复制代码时，您只需决定在 WordPress 仪表板上的何处使用 Dashicons 图标。例如，您可以在主题、元数据、导航菜单等上使用图标。

如何将 WordPress Dashicons 用于特定目的

您已经了解了如何在您的网站上使用 Dashicon，现在我们将展示如何将它们用于特定目的。

将 Dashicons 添加到 WordPress 页面和帖子

要将 Dashicons 图标添加到 WordPress 页面或帖子，首先，复制您要使用的图标的 HTML 代码。

之后，您必须将 HTML 代码放入 HTML 呈现简码中。如果您使用古腾堡编辑器，大多数页面构建器使用自定义 HTML 短代码或自定义 HTML 块。请记住，对于经典编辑器用户，这意味着将 HTML 代码粘贴到编辑器的文本选项卡中。

此外，您可以在自定义 HTML 小部件中使用相同的 HTML 代码将 Dashicons 图标添加到小部件区域。

要添加图标，请打开页面或帖子并将自定义 HTML 块插入其中。您可以将复制的代码直接粘贴到块中，也可以用 HTML 代码将其包围。

插入 HTML 代码后，发布页面/帖子并从前端预览以查看结果。

使用 WP Dashicons 导航菜单

要将 WP Dashicons 添加到 WordPress 导航菜单，首先，复制您要使用的图标的 HTML 代码。

之后，返回您的 WordPress 仪表板并单击外观 » 菜单。

然后，选择要编辑的菜单并单击要添加图标的菜单项。

接下来，在展开的菜单项部分下查找导航标签选项。您需要将 HTML 代码直接粘贴到该区域内。您可以在现有菜单项的标签之前或之后插入代码。添加 HTML 代码后，单击保存菜单按钮以保存更改。

然后，访问您网站的前端，看看您选择的图标是如何显示的。

在管理菜单中添加 Dashicons

要将自定义帖子类型添加到您的 WordPress 网站，首先，使用register_post_type()函数进行注册。此函数接受几个参数，其中之一是menu_icon 。它使您可以选择管理仪表板的自定义帖子类型菜单选项旁边显示的图标。

要使用 Dashicons，请在调用register_post_type()函数时将menu_icon参数设置为图标的完整名称（例如，dashicons-format-video）。

例如，我们注册了一个名为 movie 的自定义帖子类型，其菜单部分旁边带有dashicons-format-video图标。

我们使用wp_cpt()函数注册了电影帖子类型，该函数连接到这个小代码片段中的 init 动作挂钩。

现在访问您的 WordPress 仪表板，看看我们使用的代码结果如何。

使用自定义创建的 Dashicons 简码

您可以使用简码快速将 Dashicons 添加到您的网站。如果您正在为其他人创建网站并希望确保网站所有者可以轻松地在他们的网站上插入所需的图标而不必弄乱 HTML，那么这是一个很好的解决方案。

这是您需要添加到functions.php文件中以使用短代码 Dashicons 的代码：

然后，您可以在帖子和页面上使用这样的简码：

请记住，必须在您网站的前端加载 Dashicons 样式表才能使短代码正常工作。

请在编辑 functions.php 文件之前备份您的网站。这样，如果出现问题，您可以轻松恢复您的网站。

结论

在本指南中，我们将解释 WordPress Dashicon 是什么以及如何在 WordPress 中使用它们。我们还介绍了将 Dashicon 添加到 WordPress 网站的多种方法。无论您想将它们添加到您网站的前端还是后端，都有多种选项可供选择。

虽然您可以寻找允许您添加 Dashicon 和自定义功能的 WordPress 插件或主题，但您可以使用这些指南完全自行添加它们。有了我们介绍的信息，您应该可以按照我们描述的步骤自己完成。