WordPress divi主题

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

| 5月 14, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

在使用矢量图标或静态图像之间进行选择时,最好使用矢量。 它们体积小,加载速度快,并且可以缩放到任何尺寸而不会损失分辨率。 Font Awesome 是一个极好的矢量图标库,您可以在您的网站上使用它,它们可能具有您需要的几乎任何形状或品牌。 最重要的是? 免费。 其次,它很容易。

google广告开户

订阅我们的 Youtube 频道

字体真棒WordPress图标

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

要记住的一件事是(大多数情况下)Font Awesome 图标将作为实际字体传送到您的网站。 因此得名 Font Awesome。 您将能够使用 CSS 通过 @字体脸 和字体真棒 字体系列.

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

安装字体真棒

虽然有手动安装和使用 Font Awesome 的方法,但 WordPress 用户有更好的方法。 FA 的优秀人员发布了一个官方的 Font Awesome WordPress 插件,它运行良好。

字体真棒WordPress

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

字体真棒WordPress

WordPress divi主题

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

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

要在您的 WordPress 网站上使用 Font Awesome 图标,这很简单。 只需添加 您希望图标出现的任何地方。 确保检查图标库以了解要输入的名称。

字体真棒WordPress

注意:插件中的短代码是命中注定的。 一些图标呈现得非常好,而另一些则显示为空白。 我们建议您坚持使用 HTML 插入,除非您看到短代码适合您。 请参阅下面的 WordPress 示例,上面没有渲染,而相机图标可以。

字体真棒WordPress

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

手动安装 Font Awesome 图标

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

字体真棒WordPress

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

fiverr建站WordPress程序员

字体真棒WordPress

大多数主题都有一个地方供您将代码插入 <头部> 网站的自动。 例如,在 Divi 的情况下,你会进入 主题选项 – 集成 并将此代码粘贴到标记为的字段中 将代码添加到博客的头部.

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

字体真棒WordPress

当您点击保存时,您可以开始包含您想要的任何图标,就像我们在上面所做的那样。 只有你 无权访问简码 通过做这个。

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

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

独立站选品工具

字体真棒WordPress

找到所在的行 已编写,在此之前,您需要从 Font Awesome 粘贴相同的代码。 按 更新文件,您将能够立即开始使用 FA 图标。 同样,以这种方式安装 Font Awesome 不会获得简码。

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

更多安装选项

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

字体真棒WordPress

高质量外链购买

样式字体真棒图标

现在您已经安装了它们,是时候让图标弹出了。 您可以使用 CSS 执行此操作,因为每个图标都由 CSS 类管理。 最常用的两种样式是颜色和尺寸。 您可以在样式表中包含 CSS 样式,也可以内联。 通常,您可能希望使用内联样式,因为像这样的图标在整个站点中并不通用。

Font Awesome 网站提供了如何执行此操作的示例。 他们使用 igloo 图标和其他类(如 传真 或者 传真 或者 fa-2x 对于特定的大小。

字体真棒WordPress

此外,如果您需要图标相对于特定大小并且绝对值不起作用,您可以将其放置在自己的位置

使其在您的约束范围内工作。

JasperAI 10000字免费额度试用
<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

包起来

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

你最喜欢使用 Font Awesome 图标的方式是什么?

文章特色图片由 Font Awesome 提供

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题