Divi WordPress Theme

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

WP Astra-一个免费的多用途WordPress主题

字体真棒图标是 惊人的 (原文如此!),因为与常规图像不同:

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

此时此刻,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编辑器。

如何向WordPress添加Font Awesome图标

就像这样,您应该具有图标:

字体很棒的例子

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

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

要操作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中提供了以下小部件:

elementor字体真棒图标

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

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

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

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

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

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

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

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

【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=