如何在Weebly中使用Font Awesome图标

为什么要考虑使用字体图标？

您应该考虑使用字体图标的原因有多种：

• 图标可免费用于个人和商业用途。
• 您不需要图像和 JavaScript 来制作图标，从而缩短网站加载时间。
• 图标的外观可以使用 CSS 完全自定义。
• 可以使用不同大小的图标以完美的分辨率。
• 在配备 Retina 显示屏的设备上极具吸引力。

您可能会在 WordPress 等其他平台上看到字体图标的使用，并想知道如何在 Weebly 网站上做到这一点。

继续之前 – 关于字体真棒图标

直到版本 4x 字体真棒图标完全免费用于任何项目。 但是，您可以从第 5 版开始获得免费和付费图标。 这改变了您使用 CSS 定义图标的方式，并且您有以下选项：

您可以在免费计划中使用实体和品牌图标，我们将重点介绍如何在 Weebly 中使用它们。

推荐：如何将Word/Excel/PowerPoint文件固定到Windows 11任务栏应用程序图标

如何在 Weebly 中使用 Font Awesome图标？

虽然有很多使用字体真棒图标的方法，但我们将解释两种简单的方法：

• 将 Bootstrap CDN 用于 Font Awesome 版本 5。
• 获取 Font Awesome 版本 6 CDN 并在您的 Weebly 网站上使用它。
• 在您的站点上托管版本 6 文件。

查看 Weebly 的字体真棒小部件以查看图标的运行情况。

1. 使用 CDN 版本 5

这是在 Weebly 网站上使用字体真棒图标的最简单、可靠和简单的方法，没有任何问题。 您只需在页面或站点的标题部分下链接以下样式表。

https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css

要在站点范围内添加图标，您可以在 Weebly 站点编辑器的“设置 > SEO > 标题代码”部分下添加此样式表。

但是，我们建议在“页面”选项卡下所需页面的“标题代码”部分链接样式表。 这有助于仅在所需页面上加载样式表，而不是在整个站点上加载。 可能您可以创建一个对搜索引擎隐藏的测试页面或创建一个测试站点并链接样式表以测试它如何为您工作。 请注意，字体真棒图标可以在免费的 Weebly 网站上使用，并且不需要为此目的的高级计划。

2. 在您的网站上使用 Font Awesome 6 CDN

除了使用外部 CDN CSS 链接，您还可以通过注册免费帐户从 font awesome 获取 CDN 链接。 此处的不同之处在于，您将获得最新版本 6 的 CDN 链接，第三方服务无法提供该链接。 我们建议使用版本 6，因为这是最新版本，并提供大量不同大小的图标。 访问他们的网站并输入您的电子邮件地址以获取入门工具包。

您将收到一封确认电子邮件，并且需要验证您的电子邮件地址才能获得入门工具包。 当您单击确认链接时，它将带您进入帐户创建页面，您可以在其中创建密码并设置您的帐户，然后再开始使用您网站上的图标。

创建帐户后，您将看到 font awesome 版本 6 的代码和 CDN 链接。

CDN 链接将具有以下格式，并且特定于您的包含套件名称的帐户。 如您所见，字体真棒版本 6 套件 CDN 是一个 JavaScript 文件，而外部 CDN 是一个 CSS 文件。

<script src="https://kit.fontawesome.com/your-kit-name.js" crossorigin="anonymous"></script>

您需要将此 CDN JS 文件插入到所需页面的标头代码部分或在站点级别，如上述方法 1 中所述。

3. 在 Weebly 网站中托管 Font Awesome 6 文件

如果您不想使用 CDN CSS 或 JS，最后一个选择是下载完整的字体文件并将它们托管在您的 Weebly 网站上。 这还需要您注册一个工具包并登录您的字体真棒帐户。 您有两个选项可以在您的网站上托管 font awesome 版本 6。 一种是使用网络字体 + CSS 文件，另一种是使用 SVG + JS 文件。 登录您的帐户后，转到文档页面并导航到侧边栏中的“Host Yourself：”部分。 单击“开始测试之前”框下显示的“下载 Font Awesome v6 文件”链接。

它将带您到下载页面，然后单击“免费网络”按钮下载文件。

提取下载的 zip 文件，其中包含所有必需的 webfonts + CSS 和 SVG + JS 文件。 您可以选择一组文件并将它们上传到您的 Weebly 站点。

转到您的 Weebly 站点编辑器并导航到“主题 >​​ 编辑 HTML / CSS”部分。 这将打开代码编辑器，您可以在其中上传“资产”部分下的文件。 我们建议通过创建 CSS 和 webfonts 或 JS 和 svgs 等文件夹来上传文件。 由于 SVG 图标太多，您可以通过上传 webfonts 和 CSS 文件来选择使用 CSS 方法。

“all.css”文件包含所有超棒字体类型的完整样式。 由于免费计划允许您使用solid 和brands，您可以选择上传fontawesome.min.css、brands.min.css 和solid.min.css 文件。 上传文件后，保存您的主题并返回站点编辑器。 如上所述，您可以在站点标题或页面标题中添加以下 CSS 以插入图标。

<link href="https://yoursite.weebly.com/files/theme/css/font-awesome.min.css" rel="stylesheet">
<link href="https://yoursite.weebly.com/files/theme/css/solid.min.css" rel="stylesheet">
<link href="https://yoursite.weebly.com/files/theme/css/brands.min.css" rel="stylesheet">

在 HTML 中使用 Font Awesome 图标

一旦您决定使用版本 5 还是版本 6，下一步就是使用“嵌入代码”元素使用页面上的图标。 让我们以在页面上添加电话图标为例，使用版本 6 添加字体真棒图标的格式很简单，如下所示：

<i class="fa-solid fa-phone-square"></i> This is a font awesome phone icon.

您可以使用以下语法来使用版本 5。

<i class="fas fa-phone-square"></i> This is a font awesome phone icon.

语法包含三个部分：

• • … – 每个图标都应该在 标记中使用。

• fa-solid – 字体真棒 CSS 类前缀。 如前所述，您可以在第 6 版免费计划下使用solid 和brands。 如果使用版本 5，则需要使用 fas 类。
• fa-phone-square – 实际的图标类。

粘贴在“嵌入代码”元素中的上述代码的输出将如下所示：

增加 Font Awesome 图标的大小

有不同的 CSS 类来增加版本 5 和 6 的图标大小，如下例所示：

在版本 5 中调整大小：

<i class="fas fa-phone-square fa-xs"></i> Extra small icon
<i class="fas fa-phone-square fa-sm"></i> Small size icon
<i class="fas fa-phone-square fa-lg"></i> Increases the icon size by 33%
<i class="fas fa-phone-square fa-2x"></i> Increases the icon size by 2x
<i class="fas fa-phone-square fa-3x"></i> Increases the icon size by 3x
<i class="fas fa-phone-square fa-5x"></i> Increases the icon size by 5x
<i class="fas fa-phone-square fa-7x"></i> Increases the icon size by 7x
<i class="fas fa-phone-square fa-10x"></i> Increases the icon size by 10x

在版本 6 中更改图标大小：

<p><i class="fa-solid fa-phone-square fa-2xs"></i> Double extra small.</p>
<p><i class="fa-solid fa-phone-square fa-xs"></i> Extra small icon size.</p>
<p><i class="fa-solid fa-phone-square fa-sm"></i> Small icon size.</p>
<p><i class="fa-solid fa-phone-square"></i> Regular size icon.</p>
<p><i class="fa-solid fa-coffee fa-lg"></i> Large size icon.</p>
<p><i class="fa-solid fa-coffee fa-xl"></i> Extra large icon.</p>
<p><i class="fa-solid fa-coffee fa-2xl"></i> Double extra large size.</p>

无限定制

一旦你开始使用字体图标，就有很多有用的方法可以在网站上使用它们。 例如，您可以在版本 6 中添加如下列表：

<ul class="fa-ul">
<li><i class="fa-li fa-solid fa-check-square"></i>List item 1</li>
<li><i class="fa-li fa-solid fa-check-square"></i>List item 2</li>
<li><i class="fa-li fa-solid fa-check-square"></i>List item 3</li>
<li><i class="fa-li fa-solid fa-check-square"></i>List item 4</li>
</ul>

该列表将如下所示：

您可以参考示例以快速获取在 Weebly 站点中使用的图标名称。 请注意，您也可以使用 Unicode 代码点代替图标名称。 例如，在上面的列表图标示例中，您可以使用其等效的 Unicode 值  而不是使用图标名称 fa-check-square。

最后的话

我们建议使用自定义 CDN 链接在您的 Weebly 站点中使用 Font Awesome图标版本。 虽然您需要注册一个帐户，但您可以获得一个自定义 CDN 链接以在您的站点中使用。 此外，您可以仅在要插入图标的页眉上链接样式表，而不是将其添加到站点页眉中。

推荐：如何找到适用于Linux的应用程序