如何在HTML单网页文件中显示 Font Awesome 图标

在网站的前端网页制作中，添加一些小图标可以使网页看起来更加的美观，特别是在网站导航菜单中使用得最广泛。如果你没有一些美工底子，又想弄一些漂亮的小图标来装饰你的网页，那么 Font Awesome 图示字体是一个不错的选择。

十一张（www.11zhang.com）曾经分享过一篇文章《Z-BlogPHP 站点使用 Font Awesome 图标字体教程》，今天继续来讲解一下如何在HTML单网页文件中显示 Font Awesome 图标。

在 HTML 单页面文件中显示 Font Awesome 图标非常简单，只需要遵循以下步骤：

引入Font Awesome

首先，你需要在你的 HTML 文件中引入 Font Awesome，有下面几种方式可以做到这一点：

1、使用Font Awesome的CDN链接

你可以通过添加一个 link 标签到你的HTML文件的 head 部分来引入 Font Awesome 的CDN链接。例如，要引入 Font Awesome 5的免费图标库，你可以使用以下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

例如，要引入 Font Awesome 6的免费图标库，你可以使用以下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

PS：这里使用的是 Font Awesome 6.4.2版本，你可以根据需要选择其他版本。

2、使用Self-Hosting

如果你出于某些原因需要自己托管 Font Awesome 图标，你可以下载 Font Awesome 的包并解压，然后将CSS文件放到你的项目中，并通过相对路径引入它。例如：

<link rel="stylesheet" href="path/to/your/fontawesome/css/all.min.css">

使用Font Awesome图标

一旦 Font Awesome 被引入，你就可以在你的 HTML 中使用图标了。Font Awesome 使用 i 标签或 span 标签并通过 class 属性指定图标类型。例如，要显示一个 Facebook 图标，你可以使用以下代码：

<i class="fab fa-facebook"></i>

fa-facebook 是图标的名称，你可以根据需要选择其他图标名称，具体图标名称可以在 Font Awesome 官网查找。对于其他图标，只需更改 fa-facebook 为相应的类名即可。例如，要显示一个 Twitter 图标，使用：

<i class="fab fa-twitter"></i>

PS：fa-solid 表示固态图标，fa-regular 表示常规图标，fa-brands 表示品牌图标。

<i class="fa-solid fa-camera"></i>

<i class="fa-regular fa-camera"></i>

<i class="fa-brands fa-facebook"></i>

完整HTML示例

下面是一个包含 Font Awesome 图标的完整 HTML 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Awesome Example</title>
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <!-- 使用Font Awesome图标 -->
    <i class="fab fa-facebook"></i> Twitter icon: <i class="fab fa-twitter"></i>
</body>
</html>

通过以上步骤，你就可以在 HTML 单页面文件中显示 Font Awesome 图标了。确保检查 Font Awesome 的官方文档以获取最新的类名和版本信息。

Font Awesome 图标的介绍与应用

前天

040310