以 2 种简单的方式将 FontAwesome 添加到 WordPress

已发表: 2022-09-15

将 FontAwesome 添加到 WordPress 轻而易举。有两种简单的方法可以做到：第一种方法是使用插件。我们建议使用 Better Font Awesome插件。该插件免费且易于使用。只需安装并激活插件，然后按照设置页面上的说明将 FontAwesome 添加到您的 WordPress 网站。将 FontAwesome 添加到 WordPress 的第二种方法是手动将代码添加到您的主题中。如果您喜欢编辑代码，那么此方法适合您。只需将以下代码添加到主题的 functions.php 文件中： add_action( 'wp_enqueue_scripts', 'my_theme_scripts' ); function my_theme_scripts() { wp_enqueue_style('my-theme-fontawesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' ); } ? > 此代码将从 Bootstrap CDN 加载 FontAwesome。您还可以下载 FontAwesome 并将其托管在您自己的服务器上。这里的所有都是它的！无论您使用插件还是手动代码，将 FontAwesome 添加到 WordPress 都很容易。

按照以下步骤，CSS 内容代码可用于创建很棒的字体图标。您要使用的图标元素必须具有唯一的 CSS 类名称。将 font-weight 属性设置为 900（实心）或 400（常规或品牌）、300（专业图标）或 400（实心或品牌）。确保真棒字体图标属性设置为 unicode 值。

如何在 WordPress 中安装 Font Awesome？

信用：tutorial.blackandblue.tech

您可以通过几种不同的方式在 WordPress 中安装 Font Awesome。一种方法是使用像 WP Add Custom CSS 或 Simple Custom CSS 这样的插件。这些插件将允许您将Font Awesome CSS添加到您的 WordPress 网站。安装 Font Awesome 的另一种方法是手动将 CSS 添加到您的 WordPress 主题中。您可以通过将以下代码添加到主题的 CSS 文件中来做到这一点：@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 添加 CSS 后，您需要将其放入 WordPress 主题中。您可以通过将以下代码添加到主题的 functions.php 文件中来做到这一点： function wp_enqueue_fa() { wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css /font-awesome.min.css' ); } add_action('wp_enqueue_scripts', 'wp_enqueue_fa'); 您还可以使用 CDN 加载 Font Awesome。为此，您需要将以下代码添加到您的 WordPress 主题中：添加 CSS 后，您需要将其加入您的 WordPress 主题中。您可以通过将以下代码添加到主题的 functions.php 文件中来做到这一点： function wp_enqueue_fa() { wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css /font-awesome.min.css' ); } add_action('wp_enqueue_scripts', 'wp_enqueue_fa');

使用 Font Awesome，您可以在 WordPress 中创建图标，而无需学习任何编程或设计技能。在某些情况下，字体图标已经取代了传统的图像或精灵表，因为它们是完全可定制的和响应式的。 WordPress 插件的安装次数已超过 80,000 次，并且与该平台的最新版本兼容。字体图标可以像我们使用的任何其他日常图标一样更改。颜色、对齐方式、高度、样式等都可以更改。字体图标几乎可以用于任何浏览器。因为有太多可用的字体图标，我们不能在我们的网站中使用图片。

大多数设计师已经用Font Awesome 图标取代了传统图像。图标可以通过多种方式进行更改，但也可以通过简单的方式进行修改。它可以用来改变图标的大小、旋转它、调整它的颜色等等。要使用代码，请将其复制并粘贴到 WordPress 编辑器中。如何在 elementor 中使用 fontawesome？不需要对主题的核心文件进行任何插件或更改。 Elementor 的高级版本包括 Font Awesome 的图标。它旨在处理使用 Font Awesome Icons 和 Font Awesome Shortcodes 插件生成的简码。

如您所见，您已将以下行添加到您的脑海中。 rel = 样式表； rel = 链接到样式表； rel = 网站链接； rel = 网页链接；有Fontawesome文件吗？添加此行后，Font Awesome 将在您完成页面加载后立即加载。通过选择以下行，您可以将 Font Awesome 样式应用于您网站上的任何元素。风格：元素是字母的组合。这是被称为“Font Awesome”的字体系列。如果尚未为元素分配 Font Awesome 样式，请使用以下代码：要解决此问题，请使用以下代码。 *style* A.element 是一个没有值的元素。字体系列包括 fontawesome 和 fontmanager。 # 所有元素，无论它们是否有“元素”作为它们的类，一旦你添加了这一行，都将暴露于 Font Awesome 样式。

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

信用：readyship.co

以下步骤将引导您完成如何将无插件 Font Awesome 添加到您的 WordPress 网站。如果您想手动将图标添加到网站，请转到Font Awesome 图标库并从那里选择适当的字体。然后，使用您的电子邮件地址，输入要直接添加到您的主题的嵌入代码。

这是在您的网站上使用 Font Awesome Free 或 Pro 图标的官方方式。使用块编辑器或经典编辑器将图标添加到您的帖子和页面。要使用图标选择器，您需要购买 Pro Kit。 CDN 只能搜索和添加免费图标，不能搜索和添加 Pro 图标；要添加 Pro 图标，请使用简码或 HTML。在大多数情况下，Font Awesome 插件使用 Font Awesome CDN 提供基于 Web 的图标。您可以在打开插件后立即更改插件中的 CDN 设置。如果您只想要基本的免费图标，那么在默认配置中配置它们可能不会有任何问题。

GitHub 提供有关 WordPress 网站所有者和开发人员的信息。此外，API 可以在网站的 API 文档部分找到。 Font Awesome 插件允许您跟踪隐藏在资产文件夹中的最新版本。确保您可以访问Font Awesome 帐户页面上的 API 令牌。我网站上的所有内容都因此受到了损害。不要让它开始。版本 6 即将发布吗？

您现在可以从Font Awesome 网站下载 4.0.0-rc21 版本。为了避免不必要地阻塞对 API 服务器的网络请求，refresh_releases() API 方法已被弃用。使用 .svg 和伪元素可能会导致用户体验到性能下降，因此请让这些通知在管理 UI 中可见。在操作系统版本 4 上运行 vg 是不可能的。

如何向 WordPress 添加字体图标？

要在您的 WordPress 网站上使用 Font Awesome 图标，只需按照以下简单步骤操作。您需要做的就是在您希望图标出现的任何地方包含 i class=fab fa-wordpress%27/i> 。请仔细检查图标库以找出名称应该是什么。该插件的短代码旨在以多种方式使用。

图标可用于以多种方式为您的网站创建个人风格。在站点内使用图标使链接看起来更吸引人，并使链接的外观更加突出。 Better Font Awesome 插件是在 WordPress 上安装图标最直接的方法，但有多种方法可用。第 2 步：将一个图标从您的博客或页面拖到编辑器中，然后单击“插入图标”按钮。在第 3 步中，系统会自动将简码添加到图像中。之后，您可以使用设置来调整图形大小并进行其他更改。按照说明，您可以将以下代码添加到主主题的样式表中。

Android 应用的字体大小为 75x75x75；它的颜色是 45f338；其字体粗细为 120000；它的行高是 640；它的 margin-bottom 是 1.5em；它的内边距是 0.25em。目前，目标应该是对此进行粗略的起草。此时，您可以通过多种方式自定义图形，包括实现 CSS。根据 WordPress 文档的开头部分，任何名称为“icon”的类都是使用括号中的代码。 font-size 属性用于确定图标的大小（以像素为单位）。十六进制代码的颜色是绿色。此处显示的代码只是一个示例，您可以将其更改为您想要的任何颜色。您可以使用图标突出显示访问者感兴趣的链接或为特定功能添加更多亮点。

在您的博客中添加图标字体将为您的写作增添一点明星力量。您可以使用图标字体来帮助您轻松识别哪些帖子是关于特定主题的，并为您的帖子添加视觉吸引力。如果您想了解如何在博客上使用图标字体或不熟悉它们，请查看我们的使用图标字体指南。

如何在 WordPress 上使用图标字体

发布图标字体需要一个带有图标图标的按钮，因此请务必在单击之前创建或编辑帖子。当您按下图标按钮时，图标字体集将打开一个包含所有图标的下拉菜单。如果您从此下拉菜单中选择一个，该图标将显示在帖子编辑器中。

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

在没有插件的情况下将 Font Awesome 添加到 WordPress 是一个相对简单的过程。首先，您需要从他们的网站下载Font Awesome 文件。接下来，您需要将 Font Awesome 文件上传到您的 WordPress 网站。最后，您需要在 WordPress 主题中添加几行代码来加载 Font Awesome 文件。

关于如何在没有插件的情况下将 Font Awesome Icons 添加到 WordPress 菜单的简单分步指南。按照本教程，您将能够使用Font Awesome Kit和 CDN 将图标添加到您的站点。 CDN 功能仍然可用，但不再受支持。此外，如果您想使用 Font Awesome 的 CDN，您必须订阅 Pro 版本。除了添加新功能和自动访问之外，它还提高了性能、添加了新更新并添加了新版本。以下步骤将教您如何配置 WordPress，以便可以使用菜单图标。因为套件由快速稳定的 CDN 提供支持，所以您的 Font Awesome 图标仍会响应。

如果没有插件，您可以在 WordPress 中安装 Font Awesome Kit。只需找到主题的 functions.html 文件并添加代码片段。为了您自己的安全，我建议备份您的文件，特别是如果您是新手。如果你没有子主题，你可以使用 Code Snippets，一个插件。为了访问您的菜单，您必须拥有一个 Font Awesome 帐户。相反，我们将讨论如何手动将图标添加到 WordPress 菜单。如果您想在选择 Font Awesome 图标后从 >i> 标记复制一个类，请执行此操作。

在这种情况下，您不需要包含整个标签。 Font Awesome 主题的图标没有出现在 WordPress 菜单中，并且它们的位置不正确。这样做的原因是一个名为 Font Awesome 的类被添加到处理整个 WordPress 菜单的标签中。幸运的是，可以使用一些 CSS 代码来解决这个问题。使用本教程中的示例，您可以使用多种方法为 WordPress 创建自定义 CSS。在 Font Awesome 中，图标可以根据它们的重量和类型系列放大或缩小。自定义 CSS 可以添加到 Font Awesome Kit 的 Add Some Styles 部分下的图标中。

此外，您可以使用 WordPress 菜单通过其他类调整图标的大小。字体可以包含在文件中。这正是您的 WordPress 菜单在没有插件的情况下应该看起来的样子。为了使事情更加用户友好，您可能需要修改一些自定义 CSS 代码来解决一些样式问题。 ReadyShip 通过免费的 SSL 和 CDN 服务以及现成的 WordPress 站点和博客为您提供高质量的托管 AWS 托管。

将图标添加到您的 WordPress 菜单

您可以将文件保存为 zip 文件，然后在粘贴所有图标的 URL 后将其上传到 WordPress 安装文件夹。您可以通过单击左侧菜单上的外观按钮来添加新文件。要保存您的图标文件，请在外观菜单中打开它并选择添加新的，然后将保存它的位置粘贴到列表中。
该图标将显示在 WordPress 菜单中。