毋庸置疑，人类是非常视觉化的生物。因此，我们不仅关注内容，也关注网站的视觉设计。传统上，世界各地的网页设计师和开发人员使用图像和图像精灵，在任何网站上包括图标。然后，这些图标被用作整个网站的视觉增强，包括在导航菜单、搜索栏、滑块中的加载图标，以及类似的工具。bluehost站群服务器商分享如何在WordPress中添加FontAwesome图标
然而，尽管这种方法很方便，但它也有一些弊端。当响应式设计开始发挥作用时，这些缺点就变得很明显了，然后导致这些图像出现切断，甚至更糟的是，完全模糊。
这个问题的答案是字体图标。它们显示完全响应和可定制的图标，为你的网站设计增加一点额外的内容。本质上，它们是由图标组成的字体。
FontAwesome就是这样一种字体。而今天，我将向你展示如何轻松地将FontAwesome图标添加到你的WordPress网站。
什么是图标字体以及使用原因
图标字体包含符号或象形图，而不是字母和数字。它们可以很容易地使用CSS调整大小，而且它们不会增加你的页面加载时间，不像以前使用的图像精灵那样。
你可以用它们来为你的导航菜单、功能框、文章标题等添加图标。
除了视觉外观之外，你应该使用图标字体有几个原因。
- 字体图标是完全响应的 – 它们本质上是矢量文件，这意味着它们可以扩展到任何尺寸而不损失质量。
- 字体图标可以被样式化、定位和操作， 因为它们是字体，你可以用与传统字体相同的方式来进行操作。设置它们的颜色，在悬停时改变它们的风格，控制它们的对齐方式，设置它们的大小，等等。
- 字体图标是高度跨浏览器兼容的，而且有很多。
- 设计师们在这些图标上花费了无数时间，它们经常更新，旨在提供最好的体验。
有两种方法可以将FontAwesome添加到你的WordPress网站，我们将介绍这两种方法。第一种方法涉及使用一个插件，第二种方法涉及手动添加字体。推荐阅读：《如何改变WordPress中的标题属性》
选项1 – 使用插件在WordPress中添加图标字体
到目前为止，使用插件是向你的网站添加任何字体图标的最简单的方法。在这个例子中，我们将使用Better Font Awesome来添加字体到网站。
第1步 – 安装和激活
你需要做的第一件事是安装和激活Better Font Awesome插件。
导航到你的仪表板，然后点击插件>添加新插件。搜索FontAwesome，然后点击安装。
最后激活该插件。激活后，你可以访问设置>Better Font Awesome页面，以配置插件设置。在大多数情况下，这是不需要的，因为该插件开箱即用，所以你不需要在那里进行任何操作。
第2步 – 添加你的字体图标
Better Font Awesome允许你使用各种简码来添加字体图标，比如这样：
[icon name=”binoculars”]
[icon name=”gift”]
[icon name=”map”]
这些图标也可以在帖子编辑器中添加，只需选择所需的图标即可。如果你现在创建一个新的帖子，你会注意到你的帖子编辑器中有一个新的图标。点击它将会出现一个弹出窗口，在那里你可以找到一个图标并进行插入。推荐阅读：《如何监控其他WordPress网站》
第3步 – 定制你的字体图标
该插件将在你的文章中添加一个短码，如果你想进一步定制图标，你可以通过添加你自己的CSS类来实现，然后在你的样式表中输入具体的样式。
默认的短码看起来像这样。
[icon name=”coffee” class=”” unprefixed_class=””]
[icon name=”咖啡” class=”” unprefixed_class=”” ]
一旦你添加了一个用于样式设计的类，它看起来就像这样：
[icon name=”coffee” class=”” unprefixed_class=””]
[icon name=”咖啡” class=”” unprefixed_class=”” ]
一旦你为造型目的添加了一个类，它看起来就像这样：
[icon name=”coffee” class=”mycoffeeicon” unprefixed_class=””]
[icon name=”coffee” class=”mycoffeeicon” unprefixed_class=”” ] 。
To style it, go to Appearance > Editor and open your theme’s stylesheet. Add the following lines to it:
要为它设计样式，进入外观>编辑器，打开你的主题的样式表。添加以下几行进去：
i.fa.fa-coffee.fa-mycoffeeicon {
font-size:100px;
color:#ba1157;
}
就这么简单。
现在让我们看看如何手动添加FontAwesome。
选项2 – 在WordPress中手动添加图标字体
图标字体只不过是由图标组成的字体。因此，它们可以很容易地被添加，就像你添加任何自定义字体一样。一些图标字体，如FontAwesome，可以从整个网络的CDN服务器上获得，并且可以直接从你的WordPress主题中链接。
你也可以把整个字体目录上传到你的WordPress主题的一个文件夹里，然后在你的样式表中使用这些字体。
让我们在这里介绍一下这两种方法。
方法1 – 在你的主题的header.php文件中添加代码
最简单的方法是在你的主题的header.php文件中加入一行，就在标签的前面。
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css” />
尽管这是最简单的方法，但它并不是真正正确的WordPress方法，它可能导致与其他插件的冲突。一个更好的方法是在WordPress中通过你的functions.php文件正确地查询样式表。
点击外观>编辑器，然后选择你的 functions.php 文件。在最后，添加以下几行。
function ala_load_fa() {
wp_enqueue_style( ‘ala-fa’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘ala_load_fa’ );
一旦你完成了，点击更新文件。
方法2 – 在你的WordPress主题目录中添加字体图标
第二种方法允许你在你的主题中随时提供图标，包括一点外勤工作。首先，你需要下载图标字体并解压缩包。然后，使用FileZilla这样的程序，通过FTP连接到你的网站。
进入你的WordPress主题的目录，创建一个新的文件夹，并将其命名为fonts或fontawesome。
然后把图标字体的内容上传到你刚刚创建的文件夹中。
一旦完成，你就需要将字体添加到你的WordPress主题中。只需将这段代码添加到你的主题的 functions.php 文件中。
function ala_load_fa() {
wp_enqueue_style( ‘ala-fa’, get_stylesheet_directory_uri() . ‘/fontawesome/css/font-awesome.min.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘ala_load_fa’ );
点击更新文件，你就成功地将FontAwesome加载到你的WordPress主题中。
最后的部分是实际将图标添加到你的WordPress主题、文章或页面中。
你可以通过在你希望它显示的任何地方包括图标名称来手动完成。
去Font Awesome的网站上看看可用的图标的完整列表。点击任何你想使用的图标，你将能够看到图标的名称。点击复制以复制图标名称，然后在你的帖子或页面编辑器中进行插入。
<i class=”fa-coffee”></i>
你也可以像我们上面做的那样，在样式表中定制图标。
你也可以把不同的图标组合在一起，并一次性为它们设计样式。如果你想创建一个旁边有图标的链接列表，这很有用。只需像这样把它们包含在一个具有特定类别的div元素下。
<div class=”my-icons”>
<a class=”icons-group-item” href=”#”><i class=”fa fa-apple fa-fw”></i>Home</a>
<a class=”icons-group-item” href=”#”><i class=”fa fa-bars fa-fw”></i>Library</a>
<a class=”icons-group-item” href=”#”><i class=”fa fa-asterisk fa-fw”></i>Applications</a>
<a class=”icons-group-item” href=”#”><i class=”fa fa-cog fa-fw”></i>Settings</a>
</div>
现在你可以像这样在你的主题样式表中为它们设置样式。
.icons-group-item i {
color: #333;
font-size: 50px;
}
.icons-group-item i:hover {
color: #ba1157;
}
最后的想法
在之前的教程中，我们已经向你展示了向WordPress添加Dashicon和使用的方法。添加FontAwesome是相当类似的。这是一个让你的网站更有趣的好方法，有很多方法可以使用图标字体。
你可以用它们来设计你的导航菜单，或者把它们添加到文章标题中。你可以在你的文章中进行使用，当你想让人们注意到一些重要的内容。
你甚至可以把它们添加到你的小工具中，因为小工具接受HTML输入。想想看，如果你在你的通讯小工具上添加一个信封图标，你的通讯小工具可以变得更多?或者如果你使用一个作者框，你可以使用FontAwesome来显示你的社会媒体资料。
最重要的是，无论你的访问者使用哪种设备或哪种浏览器，他们总是能够看到清晰的、响应式的图标。推荐相关阅读：《7项WordPress维护任务让你的网站平稳运行》