如何将真棒字体图标添加到WordPress：3种简单方法

想要在WordPress中添加Font Awesome图标吗？

字体真棒图标是 惊人的 （原文如此！），因为与常规图像不同：

• 您可以调整它们的大小而不会造成质量损失，因为它们是矢量。
• 它们非常易于自定义-您可以更改大小，添加动画，添加边框等等。

此时此刻，Font Awesome包括 超过2,986个不同图标。 我要告诉你 您可以在WordPress网站上开始使用它们的3种方式。

首先，您将学习一种简单的手动方法，可用于添加“真棒字体”。

然后，您将学习如何使用2个不同的插件来完成几乎相同的事情。

如果您完全知道要使用插件，请单击此处直接跳至该部分。 否则，让我们开始使用手动方法！

如何手动将真棒字体图标添加到WordPress

要将“真棒字体”图标手动添加到WordPress，您要做的就是将样式表放入WordPress主题中。 听起来很复杂，对不对？ 不-不用担心。 这非常简单-我会告诉你。

此方法的唯一缺点是您需要手动更新样式表URL 如果您想始终使用最新版本的Font Awesome。

如何在WordPress上加入字体真棒样式表

要加入“真棒字体”样式表，您只需要在子主题的 functions.php 文件 或者 通过免费的Code Snippets插件之类的插件。

我总是建议人们使用代码片段插件来管理 functions.php，所以这就是本教程要做的。 但这是 完全 可以直接将其直接添加到主题的functions.php文件中 当你 使用儿童主题。

这是您需要添加的代码段：

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v5.0.13/css/all.css' );
}


有一个警告-看到URL部分吗？ 那是– https://use.fontawesome.com/releases/v5.0.13/css/all.css。

这是Font Awesome的当前版本 当我写这篇文章时。 但是由于您将来可能会阅读这篇文章，因此您应该转到Font Awesome并获取最新链接。

虽然您可以下载Font Awesome并通过相同的URL自己托管，但对于大多数人来说，使用免费的CDN更加容易。

要使用“代码片段”插件添加此代码，请转到 片段→添加新 并粘贴到：

确保点击 保存更改并激活 在底部使代码段处于活动状态。

就是这样！ 您刚刚在WordPress中添加了Font Awesome。

如何在内容中使用真棒字体图标

现在，您已经排入样式表，您就可以开始在内容中使用图标了。

要做到这一点：

• 转到Font Awesome网站，然后使用搜索框找到要使用的图标

• 在加载的页面上，从图标下方复制代码段

• 将该代码段添加到WordPress网站上您要使用该图标的位置。 确保使用 文本 标签，如果您使用的是WordPress编辑器。

就像这样，您应该具有图标：

但是，该图标太小了！ 让我们修复一下……

如何使字体真棒图标更大（或以其他方式更改它们）

要操作Font Awesome图标，您只需要向在WordPress编辑器中添加的图标代码中添加一些额外的参数即可。

要调整大小，可以使用类似以下的参数：

• fa-xs –特小（.75 em）
• fa-2x –大小加倍（2 em）
• fa-3x –大小增加了三倍（3 em）
• 等等。

如果您想使其真正变大，则可以一直上升到fa-10x！

因此，这是您用来将上一个示例中的图标增加三倍的代码：

<i class="fab fa-wordpress-simple fa-3x"></i>

现在更大了：

太酷了吧？

您可以使用其他修饰符来完成诸如添加边框，为图标设置动画，更改角度等等的工作！ 在这里阅读所有关于它们的信息。

这样就可以了-手动将真棒字体添加到WordPress并不难。 但是，如果您正在寻找一种更简单的方法，那么这里有两个不错的插件选项。

2个插件可帮助您将真棒字体图标添加到WordPress

更好的字体真棒

更好的Font Awesome基本上可以完全按照我在手册部分中显示的内容进行操作。 而且，当您在WordPress编辑器中时，它还为您提供了简码和图形界面，以插入Font Awesome图标，如果您不想直接使用代码，这将是一个很大的好处。

首先，请安装并激活插件。 然后，您几乎可以立即开始使用图标。

你会得到一个新的 插入图示 WordPress编辑器中的按钮：

当您单击它时，它将打开一个界面，您可以在其中搜索整个Font Awesome库并轻松插入图标：

当您选择一个图标时，该插件将向编辑器添加一个简码：

要更改图标的大小或以其他方式进行操作，您需要做的就是将相同的简短代码段从本指南的手册部分添加到 班级 区域。

例如，以下是将一个图标的大小增加三倍的方法：

简单！

最后，该插件包括一个基本设置区域，您可以通过以下方式访问该区域： 设置→更好的字体真棒。

大多数时候，您无需在此处进行任何更改。 但是，如果您要使用特定版本的Font Awesome而不是始终使用最新版本，这些设置确实会有所帮助：

元素

如果您使用Elementor页面构建器（这就是我们在WPLift上使用的！），您已经可以通过Elementor界面使用Font Awesome图标。

这是因为Elementor使用Awesome字体来支持其所有图标选项。

访问图标的最简单方法是简单地使用 图标 免费版的Elementor中提供了以下小部件：

但是Font Awesome图标也会在其他小部件中显示-例如 图标框 或者 图标列表。

后两个小部件特别有用，因为它们使以有趣的方式实际使用图标变得容易 无需知道如何编码。

阅读我们的Elementor评论，了解我们之所以喜欢Elementor的更多原因。

这就是您将真棒字体图标添加到WordPress的方式

在那里，您可以使用三种不同的方式将“真棒字体”图标添加到WordPress网站。

如果您愿意进行一些修补，那么手动方法始终是一个不错的选择。 如果不是的话，Better Font Awesome会以插件格式执行几乎相同的操作。

而且，如果您已经在使用Elementor，则可能甚至不需要这两种方法，因为Elementor已经内置了Font Awesome图标！

现在交给您–您如何在WordPress网站上使用“真棒字体”图标？ 您添加它们的首选方法是什么？