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

已发表: 2022-10-14

如果您想在 WordPress 网站中使用Font Awesome 图标，您需要做的第一件事就是安装并激活 Font Awesome Icons 插件。有关更多信息，请参阅我们关于如何安装 WordPress 插件的文章。激活插件后，您需要编辑 WordPress 主题以包含 Font Awesome CSS 文件。最简单的方法是将以下代码添加到主题的 functions.php 文件中： add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); function enqueue_font_awesome() { wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3'); 这段代码将从 Bootstrap CDN 加载 Font Awesome CSS 文件。如果您愿意，您可以下载 Font Awesome CSS 文件并将其托管在您自己的服务器上。加载 Font Awesome CSS 文件后，您可以开始使用 WordPress 网站中的图标。例如，您可以像这样在菜单中添加图标： Home Contact 您还可以在内容中使用 Font Awesome 图标。例如，您可以将一个图标添加到这样的列表：这是第一项这是第二项这是第三项您可以将一个图标添加到这样的链接：在 Twitter 上关注我可能性是无限的！有关更多信息，请参阅 Font Awesome 网站。

因此，在您的 WordPress 网站上使用Font Awesome 库相对简单。遵循这些简单的步骤后，您将能够减少页面加载时间。不必将图标用作您网站的字体。它们可以以您通常能够包含在字体中的任何方式进行编辑。 Font Awesome WordPress 插件适合那些不愿意进入主题或文件以插入所需代码的人。 Pro 计划包括 1,500 个免费图标，以及 5,000 多种变体。您可以通过将 class=fab fa-wordpress 键入和/或编辑为任何语言来添加所需的任何图标。

在您的 WP 仪表板中，单击外观 - 编辑器，然后单击 header.php 文件。在单击之前检查包含代码的行的位置，然后从 Font Awesome 粘贴相同的代码。这将需要深入研究主题的核心文件，但这将是一个简单而快速的过程。安装 Font Awesome 后，您需要确保图标位置正确。可以在样式表中包含样式或内联。颜色和尺寸是最常用的两种款式。如果您需要它相对于特定大小但绝对值不是，您可以在其自己的 <div> 中修改图标以使其在您的约束中工作。

当您在 Gutenberg 文本块中（或在 WordPress Classic 编辑器中的格式栏上方）时，可以在扩展格式栏中找到Font Awesome Icon 菜单选项。图标选择器允许您按图标名称、类别或关键字搜索 Font Awesome 图标。

如何在 WordPress 主题中使用 Font Awesome？

如果你想在你的 WordPress 主题中使用 Font Awesome，你可以通过几种方法来实现它。一种方法是使用诸如Better Font Awesome之类的插件，它会为您提供一个设置页面，您可以在其中轻松启用或禁用您网站上的 Font Awesome 图标。另一种方法是手动将 Font Awesome 代码添加到您的主题中。您可以在 Font Awesome 网站上找到每个图标的代码。获得代码后，您可以将其添加到主题的 CSS 文件或您想要包含它的任何位置。

Font Awesome 团队创建了一个新教程，介绍如何使用 ::before 伪元素在其应用程序的 4.7 版中使用 CSS 将图标添加到您的页面。使用本教程，您无需使用图像或复制和粘贴代码即可将图标添加到页面。
如果您安装了 Font Awesome 的免费版本，您可能会错过 Pro 版本中的一些图标。如果这不是一个选项，您可以获取替代的免费图标或升级到 Pro 订阅。
如果您想在不使用图像或代码的情况下向页面添加图标，则 ::before 伪元素方法是一个不错的选择。如果您按照 Font Awesome 提供的教程使用此伪元素很简单，您还可以在页面中添加图标。

我可以在商业上使用 Font Awesome 吗？

Font Awesome 是完全开源的，并带有 GPL 许可证。该程序可用于任何项目，从商业到开源再到纯个人。

如何在没有插件的情况下向 WordPress 添加 Font Awesome？

如何在没有插件的情况下将 Font Awesome 添加到您的 WordPress 您可以通过转到Font Awesome 图标库并从一系列可用字体中进行选择来手动添加图标。您可以通过电子邮件将链接发送到您的主题来获取嵌入代码。

无需任何编程或设计知识即可将图标添加到 WordPress。字体图标是完全可定制的和响应式的，其中一些已经取代了传统的图像或 Sprite 表。它目前安装在 80,000 多台计算机上，并与最新的 WordPress 版本兼容。图标可以像常规的日常字体一样频繁地更改。您可以使用这些选项更改颜色、对齐方式、高度、样式等。几乎每个浏览器都支持字体图标。因为有太多可用的字体图标，所以我们网站上图片的使用是有限的。

大多数设计师已经停止使用传统图像，并用 Font Awesome 图标取而代之。图标是一个很棒的工具，可以通过多种方式进行修改。当您更改图标大小、旋转它、更改其颜色或执行其他操作时，您还可以使其更加灵活。下面的代码必须复制并粘贴到您的 WordPress 编辑器中。你如何让 Font Awesome 在 Elementor 中工作？无需更改核心文件或为您的主题安装任何插件。 Elementor 高级版中已经出现了 font awesome 的图标。 Better Font Awesome 将允许您使用使用 Font Awesome Icons 和Font Awesome Shortcodes 插件创建的简码。

更改 Font Awesome 插件中的 CDN 设置是提供自定义图标所需的全部内容。您也可以使用自己的 CDN 配置，而不是使用默认的 Font Awesome CDN。如果您只想使用基本的免费图标，则不太可能需要对默认配置进行任何更改。从 font awesome 的官方网站下载免费的 zip 文件后，将其解压缩并链接到您的页面。在插件文档中，有很多关于如何设置自己的 CDN 的信息。

Font Awesome：您网站的必备 WordPress 插件

Font Awesome WordPress 插件允许您在网站上使用图标库。如果您不熟悉它，可以通过转到插件设置页面来调整其设置。首先，您必须首先在您的 WordPress 网站上安装 Font Awesome 插件。然后，在插件设置中，选择使用套件。通过这样做，您可以将插件的图标与特定的 CDN 一起使用。如果您只需要基本图标，则无需进行任何更改。

在没有插件的情况下向 WordPress 添加 Font Awesome

在没有插件的情况下向 WordPress 添加 Font Awesome 是一个相当简单的过程。首先，您需要访问 Font Awesome 网站并下载最新版本的 Font Awesome 库。接下来，您需要将 Font Awesome 库上传到您的 WordPress 网站。最简单的方法是使用 FTP 客户端。将 Font Awesome 库上传到您的 WordPress 站点后，您需要在 WordPress 主题的 functions.php 文件中添加几行代码。您需要添加的代码是：
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
函数 enqueue_font_awesome() {
wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3');
}
在没有插件的情况下向 WordPress 添加 Font Awesome 是一个相当简单的过程。您需要添加的代码是：
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
函数 enqueue_font_awesome() {
wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3');
}

使用以下步骤，您将能够将 Font Awesome 添加到您的 WordPress 网站。最常用的方法是内部或外部。最重要的是确保正确加载字体。如果字体和链接配置不正确，或者图标根本没有出现。使用 Font Awesome 很简单，因为只需几行即可复制和粘贴。如果您使用的是 Sass 或 Less，则需要下载 font-awesome 文件夹并将其放在项目根目录中。一些插件可以帮助您完成安装过程。您可能想创建自己的插件，可用于多个项目和主题。

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

只需从 WordPress 菜单中选择 Font Awesome 图标。通过添加 *i class=fab fa-wordpress*/i 可以很简单地向任何页面添加图标。检查图标库以获取有关包含内容的建议。请务必注意，插件中的短代码并不总是有效。

以下是 (2121) 中如何在您的 WordPress 网站上使用 Font Awesome 图标。它是网络上最受欢迎的图标库之一。如何以多种方式在 WordPress 上配置 Font Awesome？您将在本文中学习如何将 Font Awesome 与 WordPress 无缝集成。当您不知道如何在您的网站上使用 Font Awesome 图标时，将它们托管在您的服务器上是最好的选择。如果您自己托管图标，则唯一可以添加的文件是您将在 WordPress 网站上使用的文件。使 Font Awesome 作为图标包脱颖而出的原因在于它能够自定义和更改图标的外观。

WordPress 用户可以使用以下方法访问 Font Awesome。如果您没有任何编码经验，自定义图标会更加困难。作为免费下载安装的块插件 Gutenberg Stackable 可以与 Font Awesome 一起使用，使其更易于使用。 Stackable 功能允许您选择与 Font Awesome 图标质量一致的优质预制设计。您可以通过转到图标块来访问任何Font Awesome Pro帐户的图标。 Stackable 将为您处理注册过程，因此无需注册帐户或创建套件代码。无需具备编码知识即可更改图标的外观。这仅适用于购买 Free 和 Pro 计划的用户。

如果你没有使用 Font Awesome Pro，你应该在Font Awesome Standard 图标列表中寻找免费图标。如果您使用的是 Font Awesome Pro，则需要引用正确的样式前缀以及支持文件。如果您使用样式指南，您可以了解如何使用字体。这里有一些很棒的 Pro 图标。如果您订阅了 Font Awesome Standard 或更高版本，则还必须使用 Pro 图标。