如何在WordPress中添加FontAwesome图标

毫无疑问，人类是非常视觉化的生物。因此，我们不仅关注内容，还关注网站的视觉设计。

传统上，世界各地的web设计师和开发人员使用图像和图像精灵在任何网站上包含图标。

然后，这些图标作为视觉增强在整个网站上使用，如导航菜单、搜索栏、在滑块中加载图标等。

然而，尽管这种方法很方便，但它也有一些缺点。当反应灵敏的设计发挥作用时，这些缺点变得显而易见，这会导致这些图像看起来被切断，甚至更糟，完全模糊。

这个问题的答案是字体图标。它们显示完全响应和可定制的图标，为您的网站设计增添了一点额外内容。本质上，它们是由图标组成的字体。

FontAwesome就是这样一种字体。今天，我将向您展示如何轻松地将FontAwesome图标添加到WordPress网站。

在本教程中您将学到什么

图标字体是什么以及为什么要使用它们
如何使用插件将图标字体添加到WordPress中
如何手动将图标字体添加到WordPress中

什么是图标字体，为什么要使用它们？

图标字体包含符号或象形图，而不是字母和数字。与以前使用的图像精灵不同，它们可以使用CSS轻松调整大小，并且不会增加页面加载时间。

您可以使用它们向导航菜单、功能框、帖子标题等添加图标。

使用图标字体而非视觉外观的原因有几个：

字体图标是完全响应的–它们本质上是矢量文件，这意味着它们可以缩放到任何大小而不损失质量。
字体图标可以设置样式、定位和操作–因为它们是字体，所以您可以使用与传统字体相同的方式来操作它们。设置其颜色、悬停时更改其样式、控制其对齐、设置其大小等。
字体图标具有高度的跨浏览器兼容性，而且有很多。
设计师们花了很多时间在这些图标上，它们经常更新，旨在提供最佳体验。

有两种方法可以将FontAwesome添加到WordPress网站，我们将介绍这两种方法。第一种方法涉及使用插件，第二种方法涉及手动添加字体。

选项1–使用插件在WordPress中添加图标字体

到目前为止，使用插件是向网站添加任何字体图标的最简单方法。在本例中，我们将使用更好的字体真棒将字体添加到网站。

步骤1–安装并激活

您需要做的第一件事是安装并激活更好的字体真棒插件。

导航到仪表板，然后单击插件>添加新插件。搜索FontAwesome，然后单击安装。

最后激活插件。激活后，您可以访问Settings>Better Font Awesome页面来配置插件设置。在大多数情况下，这是不需要的，因为插件是开箱即用的，所以您不需要在那里更改任何内容。

步骤2–添加字体图标

Better Font Awesome允许您使用以下各种短代码添加字体图标：

[图标名称=“双筒望远镜”]

[图标名称=“礼物”]

[图标名称=“地图”]

只需选择所需的图标，即可在帖子编辑器中添加图标。如果您现在要创建一篇新文章，您将在文章编辑器中看到一个新图标。单击它将弹出一个弹出窗口，您可以在其中找到一个图标并将其插入。

步骤3–自定义字体图标

该插件将在您的帖子中添加一个短代码，如果您想进一步自定义图标，可以通过向其添加您自己的CSS类，然后在样式表中输入特定样式来实现。

默认短代码如下所示：

[图标名称=“coffee”class=”“unfixed\u class=”“]

添加用于样式设置的类后，其外观如下所示：

[图标名称=“coffee”class=”“unfixed\u class=”“]

添加用于样式设置的类后，其外观如下所示：

[icon name=“coffee”class=“mycoffeeicon”unfixed\u class=”]

要设置样式，请转到外观>编辑器并打开主题的样式表。添加以下行：

i、 fa。fa咖啡。fa mycoffeeicon{字体大小：100px；颜色：#ba1157；}

就这么简单。

现在让我们看看如何手动添加FontAwesome。

选项2–手动在WordPress中添加图标字体

图标字体只不过是由图标组成的字体。因此，可以像添加任何自定义字体一样轻松添加它们。一些图标字体，如FontAwesome，可从网络上的CDN服务器获得，并可直接从WordPress主题链接。

您还可以将整个字体目录上载到WordPress主题中的文件夹，然后在样式表中使用这些字体。

让我们在这里讨论这两种方法。

方法1–将代码添加到主题的标题中。php文件

最简单的方法是在主题的标题中包含一行。php文件，就在标记之前。

尽管这是最简单的方法，但它并不是真正正确的WordPress方法，它可能会与其他插件发生冲突。更好的方法是通过函数在WordPress中正确排列样式表。php文件。

单击外观>编辑器，然后选择您的函数。php文件。在末尾，添加以下行：

函数ala\u load\u fa（）{wp\u enqueue\u style（'ala fa'，'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' ); } 添加\u操作（“wp\u enqueue\u scripts”、“ala\u load\u fa”）；

完成后，单击更新文件。

方法2–将字体图标添加到WordPress主题的目录中

第二种方法允许您在主题中随时使用图标，并包括一些腿部工作。首先，你需要下载图标字体然后解开包裹。然后，使用类似FileZilla的程序通过FTP连接到您的网站。

转到WordPress主题的目录，创建一个新文件夹，并将其命名为fonts或fontawesome。

然后将图标字体的内容上载到刚才创建的文件夹中。

完成后，您需要将字体添加到WordPress主题中。只需将此代码添加到主题的函数中。php文件。

函数ala\u load\u fa（）{wp\u enqueue\u style（'ala fa'，get\u stylesheet\u directory\u uri（）。/fontawesome/css/font awesome.min.css'）；}添加\u操作（“wp\u enqueue\u scripts”、“ala\u load\u fa”）；

单击更新文件，您将成功地将FontAwesome加载到WordPress主题中。

最后一部分实际上是在WordPress主题、帖子或页面中添加图标。

您可以手动执行此操作，方法是将图标名称包含在希望其显示的任何位置。

去Font Awesome的网站查看可用图标的完整列表。单击要使用的任何图标，您将能够看到图标名称。单击“复制”复制图标名称，然后将其插入帖子或页面编辑器：

咖啡

您还可以像上面所做的那样自定义样式表中的图标。

您还可以将不同的图标组合在一起，并立即设置它们的样式。例如，如果您想创建一个链接列表，旁边有图标，这将非常有用。只需将它们包装在具有特定类的div元素下，如下所示：

主页应用程序fa fw“>设置

现在，您可以在主题的样式表中设置它们的样式，如下所示：

.图标组项目i{颜色：#333；字体大小：50px；}。图标组项目i：悬停{颜色：#ba1157；}

最后的想法

在上一个教程中，我们向您展示了如何添加虚线图标以及如何使用它们。添加FontAwesome非常相似。这是一个让你的网站更有趣的好方法，有很多方法可以使用图标字体。

您可以使用它们来设置导航菜单的样式，或将其添加到帖子标题中。当你想引起人们对重要事情的注意时，你可以在你的帖子中使用它们。

您甚至可以将它们添加到小部件中，因为小部件接受HTML输入。考虑一下，如果您在新闻稿小部件中添加信封图标，它会有多大的价值？或者，如果你使用作者框，你可以使用FontAwesome来显示你的社交媒体档案。