WordPress 图标：它们是什么以及如何将它们添加到您的网站

WordPress 图标可以帮助改善您网站上的用户体验。例如，您可以在导航菜单、页脚和站点的其他部分使用图标来吸引用户的注意力并促使他们采取行动，以及其他好处。

在本指南中，我们将介绍：

什么图标是
如何使用插件向 WordPress 添加图标
如何使用 Dashicons 向 WordPress 添加图标

什么是 WordPress 图标？

在 WordPress 中，图标的功能与所有网络图标相同。它们旨在将注意力吸引到网页的重要部分，指示信息，同时占用比文本更少的空间，并强化您的品牌。
Quartz 只是WordPress 网站的一个例子，它在其移动网站上使用图标来帮助读者浏览网站。他们可以点击搜索图标查找特定文章，点击人形图标登录，或点击屏幕底部的其中一个图标浏览网站的不同部分。

现在您知道什么是图标以及如何使用它们来改善用户体验，让我们来看看如何将它们添加到您的WordPress 网站。

将图标添加到 WordPress

有两种方法可以将图标添加到 WordPress。您可以使用像 Font Awesome 插件这样的图标插件，它非常适合初学者。或者你可以使用 WordPress 默认的图标包 Dashicons。此方法非常适合更高级的用户，因为它需要编辑 functions.php 文件。

让我们在下面浏览这两个过程。

使用插件向 WordPress 添加图标

要以一种简单、对初学者友好的方式向 WordPress 添加图标，请考虑使用WordPress 插件。为了这个演示，我们将使用 Font Awesome 插件来完成整个过程。具体步骤可能因您使用的插件而异。

1.安装并激活插件。

首先，登录到您的 WordPress 仪表板并安装并激活 Font Awesome 插件。

2. 根据需要配置插件设置。

安装并激活插件后，您将自动重定向到“已安装插件” 页面。在 Font Awesome 下方，点击Settings。

默认情况下，该插件将设置为通过 Font Awesome CDN 使用免费的 Web 图标。如果您对这些设置感到满意，则无需进行任何更改。

但是，如果您想在您的网站上使用免费和专业图标，您需要设置一个 Font Awesome Kit，获取一个 API 令牌，并将其添加到您的插件设置页面。进行这些更改后，点击保存更改。

3. 将短代码或 HTML 片段复制并粘贴到您希望图标出现的位置。

Font Awesome 图标的短代码如下所示：

[icon name=”value”]

确保将占位符文本“值”替换为您要添加到站点的图标的实际名称。例如，如果你想添加一个奖励图标，那么你可以使用简码：

[icon name=”award”]

如果您更喜欢 HTML 而不是短代码，那么您可以使用标准的 Font Awesome 语法添加图标。最好的部分是为 Font Awesome 库中的每个图标提供了 HTML 片段，因此您只需复制并粘贴它。这是奖励图标的 HTML 片段：

4. 预览帖子或页面。

为确保您正确添加了图标，请预览帖子或页面。它应该看起来像这样：

如果该图标未出现，请确保您尝试添加的是免费图标，而不是付费图标。

使用 Dashicons 向 WordPress 添加图标

WordPress 有一个官方图标字体，叫做 Dashicons。这些用于 WordPress 仪表板和块编辑器。例如，以下是用于表示 WordPress 中不同帖子格式的图标：

您可以在您网站的前端使用这些，但您需要将其排队。这将需要编辑您的 functions.php 文件，这使得此方法更适合高级用户。
下面我们直接编辑functions.php文件。但是，编辑此文件时的任何错误都可能破坏您的站点。此外，任何添加的自定义代码都将在您下次更新主题时被删除。因此，建议您改用Code Snippets之类的插件。

1. 打开主题文件编辑器。

登录到您的 WordPress 仪表板并单击外观 >主题文件编辑器。

2. 将代码片段添加到您的 functions.php 文件中。

默认情况下，主题文件编辑器将打开您的样式表。单击主题函数或 functions.php 文件。

滚动到文件底部并复制并粘贴以下代码片段：

单击更新文件。

3. 复制并粘贴 Dashicons 库中图标的 HTML。

文件更新后，您可以访问Dashicons 库。单击要添加到站点的图标，然后单击复制 HTML。

4. 将 HTML 片段复制并粘贴到您希望图标出现的位置。

现在转到要添加图标的帖子或页面。添加自定义 HTML 块并粘贴 HTML 片段。

5. 预览帖子或页面。