WordPress Dashicons：如何使用并充分利用？

图标很有吸引力！

通过建立强烈的视觉连接，它们能够快速与受众沟通。

这就是为什么包括wordpress网站在内的各个地方都广泛使用图标。

此外，长时间在您的网站上使用相同的主题可能会变得乏味。这是常见的。

然后，您将寻找更有趣的东西，并使用它，然后再次感到无聊，

循环继续下去……

那么，您如何跳过这种乏味的循环呢？

dashicons是一个绝佳的方法！

它可以为您的网站美学增添趣味，帮助您脱颖而出。它还可以避免您做出额外努力并使网站拥挤，从而减慢页面加载速度。

因此，让我们来探索dashicons以及如何在wordpress网站上有效使用它们。

什么是wordpress dashicons？

dashicons是wordpress版本3.8引入的官方图标字体。如果您在网站上使用它，这些字体看起来很酷且令人赞叹。它们是高质量的svg文件，您可以轻松缩放到任何大小而不会产生像素化。

由于它们由wordpress团队创建，并具有本地wordpress支持，您可以直接使用它们而无需加载其他脚本。其中包含了大约350个图标字体，您可以在官方wordpress开发者资源中找到它们。

他们根据主题对这些图标进行了分类，您还可以看到一个动态搜索框，允许您过滤可用的图标。

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

• wordpress仪表盘
• 导航菜单
• 页面和文章
• 元数据
• 编辑器元素
• 自定义插件和主题
• 管理面板
• 前端设计

您是否注意到我一遍又一遍地说“图标”？

在这里，我指的只是图标字体。

不是作为图标的图像。

是的，两者之间有区别。

让我们揭开这个区别。

图像图标和图标字体之间的区别是什么？

图标字体和图像图标有些相似，但图标字体中有矢量符号，而不是字母。

这是否太技术化了？

让我澄清一下。

基本上，这些图标字体类似于您可以在网站上使用的图像，但不是实际的图像。

它们为您提供了很多好处。

怎样？

请在下一节中了解。

为什么应该使用它们？

• 像您在网站上使用的文本一样可扩展，因为它们是字体
• 与图像相比，轻量级不会影响页面加载速度
• 能够通过css设置图标颜色，并添加其他属性，如渐变颜色、阴影等
• 通过允许您一次性加载所有字体来很好地节省许多http请求，您可以在页面中使用它们。如果您在网站上使用了很多图像，则必须进行大量请求来获取它们，这会增加页面加载时间。
• 比图像更易于使用和调整。您无需每次需要视频播放器、电子邮件、音乐或任何其他东西的图标时都重新创建它们，您可以添加可识别和创意的符号。
• 由于它们被内置到wordpress中，因此具有更大的可访问性

如何使用它们？

使用dashicons并不是什么复杂的工程。

相信我，我对这两者都很熟悉:0

只需按照下面提到的一些步骤开始使用wordpress dashicons。

步骤1：在wordpress网站上启用dashicons

在开始之前，在需要的地方启用dashicons，例如主题。为此，您需要向function.php文件中添加一些代码。

操作步骤如下：

• 首先，从wordpress仪表板进入主题/外观编辑器。
• 打开function.php文件。
• 滚动到文件末尾，并添加一些代码来加载脚本。

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

上面的示例是在前端启用dashicons。

请确保在编辑functions.php文件之前创建一个子主题。这是因为如果您直接编辑主题文件，然后为该主题发布了更新，那么它将覆盖您对该文件所做的所有更改。

步骤2：查找dashicon的html和css代码

wordpress.org提供了一个dashicons库，可以帮助您找到每个图标所属的css和html代码。在这里，前往开发人员资源以找到您想要使用的dashicons，然后：

• 点击您希望使用的图标。
• 通过单击“复制css”或“复制html”来选择。
• 现在，您将看到一个弹出窗口。只需将代码复制到剪贴板中。
• 确定您想要使用图标的位置，例如主题、元数据、导航菜单等。
• 将复制的代码粘贴到所选位置的文本小部件或文本编辑器中。
• 使用自定义css修改图标外观。

就是这样。

此外，默认情况下，所有图标的大小为20像素。您可以使用各种选项的css元素来更改它，例如google chrome的检查元素或firefox的 firebug。

如何充分利用wordpress dashicons？

您已经看到了如何在您的网站上使用dashicons，现在我们将看到它在特定用途上的用法。

1. 在导航菜单上使用

要在菜单上添加图标，请按照以下步骤操作：

• 从仪表板中转到菜单/外观。
• 从wordpress.org复制为菜单图标设计的html代码。
• 将其粘贴到仪表板上的“导航标签”上。
• 点击“保存”按钮，然后加载主页。它应该显示出时尚而清晰的图标。

2. 在文章元数据上使用

您将能够根据主题加上的日期、作者名称、标签或分类使用dashicons。

由于您已经添加了dashicons，打开style.css文件。否则，您也可以使用自定义css编辑器，它不会在主题更新后使您丢失更改。接下来，在找到匹配的选择器后，添加您的css代码。

3. 在wordpress后台使用

如果您想为不同的自定义文章标题、文章类型或小部件包含不同的图标，这很容易实现。

一个快速提示：创建一个简码

为了方便使用dashicons，您可以为其创建一个简码。这在为客户制作网站时非常有用，他们可以轻松地插入dashicons而不会弄乱代码。

结论

我希望您对wordpress dashicons方面的情况很清楚。它们不仅可以美化您的网站，而且易于使用，并提高页面加载速度。

而且你知道，“美丽和智慧”是一种罕见的组合。

所以，快点，在你的 wordpress 网站上使用那些引人注目的 dashicons 吧！