如何在您的 WordPress 网站上使用 Font Awesome

已发表: 2019-02-14

当在使用矢量图标或静态图像之间做出选择时，使用矢量是个好主意。 它们体积小，加载速度快，并且可以缩放到任何大小而不会降低分辨率。 Font Awesome 是一个极好的矢量图标库，您可以在您的网站上使用它们，它们可能具有您需要的几乎任何形状或品牌。 最重要的是？ 免费。 最重要的是，这很容易。

订阅我们的 YouTube 频道

字体真棒WordPress图标

在您的 WordPress 网站上使用 Font Awesome 库相对轻松。 一旦您遵循这些简单的步骤，您将能够减少页面加载时间并使用这些图标作为您工作的一部分创建一些非常干净、清晰的设计。

要记住的一件事是（大多数情况下）Font Awesome 图标将作为实际字体发送到您的网站。 因此名称字体真棒。 您将能够通过@font-face和 Font Awesome font-family使用 CSS 以您通常可以使用的字体字符的各种方式来设置样式和操作它们。

因此，您不必担心每个浏览器或视口的大小或间距。 如果它听起来很棒，那是因为它确实如此。 这是你如何做到的：

安装 Font Awesome

虽然有手动安装和使用 Font Awesome 的方法，但对于 WordPress 用户来说，还有更好的方法。 FA 的好人已经发布了一个官方的 Font Awesome WordPress 插件，它运行得很好。

字体真棒WordPress

安装并激活插件后，您现在可以访问 [[icon name]] 短代码以及 HTML 片段。 只要您保留方便的 FA 图标列表，您就可以确切地知道您需要什么图标。 您将在插件的设置页面（在Settings – Font Awesome下找到）看到默认情况下是如何设置的。 一般来说，这些都可以保存和使用。 大多数人不需要其他任何东西。

字体真棒WordPress

Method选项对于大多数人来说可能是最重要的。 您可以在Webfont或SVG之间切换。 虽然 SVG 为您提供了更多的功能和功能（例如电源转换和遮罩），但 Font Awesome CDN 会将图标作为 SVG 文件而不是字体提供。 虽然这在某些方面更好，但 SVG 并没有被那么多浏览器识别，WordPress 也不能总是很好地处理 SVG 图像。 所以我们建议使用 webfont 版本安全。

Font Awesome 也是如此，就此而言：如果您不确定差异，或者不知道为什么需要使用 SVG，那么坚持使用默认的 webfont 方法可能是最简单的。

要在您的 WordPress 网站上使用 Font Awesome 图标，这很简单。 只需将<i class="fab fa-wordpress"></i> 添加到您希望图标出现的任何位置。 请务必检查图标库以了解要输入的名称。

字体真棒WordPress

注意：插件中的短代码是偶然的。 一些图标呈现得非常好，而其他图标则显示为空白。 我们建议您坚持使用 HTML 插入，除非您看到短代码适合您。 请参阅下面的示例，了解上面没有渲染的 WordPress 示例，而相机图标却有。

字体真棒WordPress

你已经完成了。 Font Awesome WordPress 插件非常适合那些不习惯进入主题或文件以插入其他所需代码的人。 但是，如果您愿意这样做，您可以按照这些说明在您的网站上获取 Font Awesome 图标。

手动安装 Font Awesome 图标

您需要做的第一件事是访问 Font Awesome 网站。 从那里，单击开始使用免费按钮。 他们确实为拥有高流量站点并需要企业解决方案的人提供付费计划，但普通大众可以使用免费版本。 您可以免费获得 1,500 个图标，以及 Pro 计划中的 5,000 多个变体。

字体真棒WordPress

下一步是简单地复制/粘贴。 但是您需要确保已突出显示 webfont 选项，就像我们之前讨论的那样。

字体真棒WordPress

大多数主题都有一个位置供您自动将代码插入网站的<head> 。 例如，在 Divi 的情况下，您将进入主题选项 - 集成并将此代码粘贴到标记为将代码添加到博客标题的字段中。 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

字体真棒WordPress

当您点击保存时，您可以开始包含您想要的任何图标，就像我们上面所做的那样。 只是，您无法通过执行此操作访问短代码。

如果您的主题不支持代码集成

如果您在主题中找不到这样的位置，手动操作也同样容易。 但是，您必须深入研究主题的核心文件才能这样做，但这是一个非常快速的复制/粘贴，并且（通常）非常安全。 转到 WP 仪表板中的外观 – 编辑器，然后找到header.php文件。

字体真棒WordPress

找到</head>所在的那一行，在它之前，你需要粘贴来自 Font Awesome 的相同代码。 按Update File ，您将能够立即开始使用 FA 图标。 同样，通过这种方式安装 Font Awesome，您不会获得短代码。

另外，请记住，无论何时编辑主题文件，您都希望使用子主题。 通过这样做，您可以防止您所做的更改在主题更新时被覆盖。

更多安装选项

如果您对 Font Awesome 有其他更具体的需求，它们确实提供了多种访问库的方法。 从 NPM 和 Yarn 安装，到 Sketch 和 React 集成，如果您需要的不仅仅是 WordPress，它们有很多选择。

字体真棒WordPress

样式字体真棒图标

现在你已经安装了它们，是时候让图标流行起来了。 您可以使用 CSS 来做到这一点，因为每个图标都由一个 CSS 类管理。 两种最常用的样式是颜色和大小。 您可以在样式表中包含 CSS 样式，也可以内联。 通常，您可能希望使用内联样式，因为像这样的图标在整个站点中并不通用。

Font Awesome 网站提供了如何执行此操作的示例。 他们使用冰屋图标和附加类（如fa-xs或fa-xl或fa-2x特定尺寸）显示尺寸。

字体真棒WordPress

此外，如果您需要图标相对于特定大小并且绝对值不起作用，您可以将它放在自己的<div> 中以使其在您的约束范围内工作。 

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

包起来

就是这样！ 很棒，对吧？ 无论您是使用 Font Awesome WordPress 插件还是手动插入代码，只需几个步骤即可启动并运行您的网站。 Font Awesome 很受欢迎是有原因的，其中一些来自它的易用性。 所以走出去，变得很棒！

您最喜欢使用 Font Awesome 图标的方式是什么？

文章特色图片由 Font Awesome 提供