了解WordPress图标字体以及如何上传

WordPress图标字体是每个WordPress网站的重要组成部分。它们极大地增加了维护响应式网站设计的能力。

您注意到我们网站上的所有图标了吗？其中之一是导航栏上的主页图标。

好吧，如果您想将这样的图标添加到您自己的网站 – 请高枕无忧，因为我们将教您如何做到这一点。

• 为什么是图标字体？
• 免费图标字体
• 在WordPress上使用图标的最便捷方法
  • 使用插件
  • 使用Dashicons

为什么使用图标字体？

图标字体是包含符号和象形图的字体，而不是字母和常规符号。它可以用来显示常用的图标——小图片。让我们更深入地了解。

您可以在几乎每个网站或博客中找到的一些图标字体示例是社交媒体按钮。当您要从网站分享内容到您的Facebook帐户时，您单击Facebook图标字体！在图标字体存在之前，所有网络图标和精灵都是图像。由于图像不可扩展且无响应，因此可能会减慢页面加载时间并使某些受众无法访问。因此，图标字体作为替代品出现在任何屏幕上，而且重量更轻！

图标字体是矢量图像。因此它们是无限可扩展的。

它们是响应式设计的一项重要功能，因为您可以根据需要轻松操作图标字体。有大量的自定义选项——更改图标大小和颜色、旋转它们、添加效果等等。所有这些以及更多都可以通过CSS简单地完成，而不会损失任何视觉质量。

它们很简单并且相对容易实现。此外，图标字体还允许您在单个文件中存储许多符号。这可以减少HTTP请求的数量。

尽管还有其他添加图标的选项，但图标字体仍然被广泛使用，因为您可以轻松找到免费的图标字体，甚至设计自己的图标字体以在您的网站上使用。

免费图标字体

您的WordPress网站有几种免费的图标字体来源。您只需在Google上浏览“icon font”即可。IcoFont、Font Awesome、We Love Icon Fonts和IcoMoon是最推荐的平台。

IcoFont是免费图标字体的最大来源之一。它以单一字体提供超过2100+个图标，分为30个类别。它还允许您生成自己的自定义图标包。

您可以简单地从IcoFont的站点下载图标——通过复制HTML代码或单击站点导航中的下载按钮。

只需浏览您选择的图标，将它们添加到您的收藏中，然后下载它们。下载后，您将获得一个包含CSS、示例和字体的zip文件。下载图标的HTML片段与示例文件夹中的Unicode配对。

如果您想直接在Web上使用它们，您可以将整个IcoFont目录复制到您的项目文件夹中。请务必在header将位置引用到您的icofont.min.css。

另一个广泛使用的图标字体来源是Font Awesome。它提供了 1500 多个免费图标和 5000 多个专业版图标，涵盖了 70 多种图标，具有四种主要风格 – 实心、常规、轻巧、品牌。

We Love Icon Fonts是另一个来源，可让您在其字体创建者的帮助下构建自己的图标。您只需单击“添加”并获取可用于通过 CSS 自定义您的收藏的可嵌入代码。

最后但并非最不重要的是，IcoMoon提供超过 5,500 个免费矢量图标和超过 4,000 个高级图标。您还可以构建自己的 IcoMoon 字体并使用导入功能上传您自己的 SVG 文件。

除上述网站之外，你可以访问https://www.iamxk.com/nav-icon以获取更多的图标资源。

在WordPress上使用图标字体的便捷方法

您可以通过复制嵌入的代码或使用替代选项手动使用WordPress网站上的字体图标。不管性能问题如何，利用插件和内置的Dashicons是使用WordPress字体图标的最快和最简单的方法。

使用插件

使用WordPress插件是向WordPress网站添加图标字体的最简单方法，无需修改代码。首先，您必须安装并激活免费的Font Awesome集成插件。完成安装和激活后，您可以开始添加带有简码的字体图标 – [fawesome]。让我们进入细节。

短代码中有四个属性：

• target –‘a'标签的目标
• href – 在‘a'标签中使用的链接
• iclass – 在/i/标签中使用的类
• aclass – 在'a'标签中使用的类

让我们创建一个指向WordPress网站的图标。

在这里，我们必须将图标代码 – (fa-wordpres) – 放入iclass标签，并将链接http://wordpress.com/放入ahref标签：

[ fawesome iclass='fab fa-wordpress' ahref='https://wordpress.com' ]

请注意，在此示例中，我们将前缀fab添加到iclass。稍后我们将通过为您提供备忘单来介绍样式前缀。

以下是它在WordPress短代码区块上的外观：预览或发布后，它将如下所示：当您单击WordPress图标时，您将被重定向到链接的站点。

您也可以直接进入Font Awesome图标的目录并查看您要使用的图标的代码。为此，请单击该图标并将代码复制粘贴到您网站内容的预期部分。

让我们使用Font Awesome上提供的免费WordPress图标，并将其放在WordPress文章上作为示例。

首先，只需从Font Awesome复制所选的WordPress图标代码：

然后，将它放在WordPress文章编辑器中HTML区块上，它会如下所示：这是预览时的样子：

除了该示例之外，您仍然可以通过手动定义元素（颜色、大小等）来根据项目需要对其进行自定义。

下面是一个修改图标颜色和大小的代码示例： 预览：请记住，要引用图标，我们使用，并使用来启动命令。此外，每个图标名称都有一个样式前缀。

以下是命令的顺序：

或者，

这是上述命令的备忘单：