如何使用并充分利用它?

图标很吸引人!

他们有能力通过建立强大的视觉联系与观众快速交流。

这就是为什么图标被广泛使用的原因,包括 WordPress 网站。

此外,在您的网站上使用相同的主题几个月可能会很无聊。 这很常见。

然后,你会寻找更有趣的东西,使用它,然后再次感到无聊,

循环一直持续下去……

那么,你怎么能跳过无聊的循环呢?

Dashicons 是一个很好的方法!

它可以为您的网站增添趣味并帮助您脱颖而出。 它还将使您免于付出额外的努力并使您的网站充满不必要的图像,从而降低页面速度。

因此,让我们探索 Dashicons 以及如何在您的 WordPress 网站上有效地使用它们。

什么是 WordPress Dashicons?

Dashicons 是多年前在 3.8 版中引入的 WordPress 官方图标字体。 如果您在您的网站上使用这些字体,它们看起来很酷而且很棒。 它们是顶级质量的 SVG 文件,您可以轻松缩放到任何大小而无需像素化。

由于它们是由他们的团队自己创建的,因此拥有原生 WordPress 支持,您可以直接使用它们而无需加载额外的脚本。 包含大约350种图标字体,你可以在官方里面找到 WordPress 开发人员资源.

他们根据主题对这些图标进行了分类,此外,您还可以看到一个动态搜索字段,可让您过滤可用的图标。

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

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

你注意到我在重复说“图标”吗?

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

不是图标形式的图像。

是的,两者之间是有区别的。

让我们来解开它。

  Xbox One 上有 Arma 3 吗?

图像图标和图标字体之间的区别?

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

那是不是太技术化了?

让我澄清一下。

基本上,这些图标字体类似于可用于在网站上添加符号的图像,而不是实际图像。

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

如何?

在下一节中弄清楚。

为什么要使用它们?

  • 可缩放,就像您网站上使用的文本一样,因为它们是字体
  • 与图像相比,重量轻,不会影响您的页面加载速度
  • 能够通过 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 代码。 在这里,转到 Developer Resources 找到您要使用的 Dashicons,然后:

  • 单击您想要的图标。
  • 通过单击在“复制 CSS”或“复制 HTML”之间进行选择。
  • 现在,您将看到一个弹出窗口。 只需将代码复制到剪贴板。
  • 确定要在何处使用图标,例如主题、元数据、导航菜单等。
  • 将复制的代码粘贴到所选位置的文本小部件或文本编辑器中。
  • 使用自定义 CSS 修改图标外观
  如何在 Word 和 Google Docs 中创建悬挂缩进

而已。

此外,默认情况下,所有图标的大小都是 20 像素。 您可以使用 Google Chrome 的 Inspect Element 或 Firefox 的 FireBug 等选项中的 CSS 元素更改它。

如何充分利用 WordPress Dashicons?

您看到了如何在您的网站上使用 Dashicons,现在我们将看到它在特定用途上的用法。

1.使用导航菜单

要将图标添加到菜单,请按照以下步骤操作:

  • 从仪表板转到菜单/外观
  • 从 WordPress.org 复制为菜单图标设计的 HTML 代码
  • 贴在仪表盘的“导航标签”上
  • 单击“保存”按钮,然后加载主页。 它应该显示酷炫的图标。

2.在post meta上使用

您将能够在日期、作者姓名、标签或基于主题及其显示的数据的类别前使用 Dashicons。

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

3. 在 WordPress 后端

如果您想要为不同的自定义帖子标题、帖子类型或小部件包含不同的图标,这很容易做到。

快速提示:创建简码

要轻松使用 Dashicons,您可以为其创建一个短代码。 它很有用,尤其是当您为客户制作网站时,他们会发现很容易插入 Dashicons 而无需弄乱代码。

结论

我希望您对 WordPress Dashicons 的了解非常清楚。 它们不仅涵盖了您网站的美学,而且易于使用并提高了页面加载速度。

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

所以,快点,在您的 WordPress 网站上使用那些引人注目的 Dashicons!