Font Awesome 参考手册学习笔记

什么是 Font Awesome？

Font Awesome 是一款免费的图标库，其中包含了超过 7,000 个可缩放的矢量图标。这些图标可以通过 CSS 引入并应用于 HTML 页面中，非常适合用于 Web 开发中。

如何使用 Font Awesome？

首先，需要在 HTML 页面中引入 Font Awesome 的 CSS 文件。可以通过以下代码引入：

htmlCopy Code
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-DJgqvKBg5RpKOFW6JzuxwwBf+OIWqzs1vi9J/BOH4pDjgMqa70P8zeLdXQ+nT2qG" crossorigin="anonymous">

然后，在 HTML 页面中就可以使用 Font Awesome 提供的图标了。例如，在以下代码中，我们使用了一个名为 "fa-thumbs-up" 的图标：

htmlCopy Code
<i class="fas fa-thumbs-up"></i>

常用的 Font Awesome 类别和图标

标准图标

标准图标通常用于表示常见的 UI 元素，例如箭头、菜单、按钮等。

fas fa-arrow-alt-circle-down ：向下的空心圆箭头
fas fa-bars ：三条横杠组成的菜单图标
fas fa-check ：勾选框
fas fa-plus ：加号
fas fa-search ：搜索图标

Web 应用程序图标

Web 应用程序图标通常用于表示 Web 应用程序的功能，例如社交媒体、电子邮件、购物车等。

fab fa-facebook ：Facebook 图标
fab fa-github ：GitHub 图标
fas fa-envelope ：邮件信封图标
fas fa-shopping-cart ：购物车图标

用户界面图标

用户界面图标通常用于表示用户界面的 UI 元素，例如复选框、开关、输入框等。

fas fa-check-square ：实心的勾选框
fas fa-minus-square ：实心的减号框
fas fa-toggle-off ：关闭状态的开关
fas fa-user ：用户图标

实例

下面是一个使用 Font Awesome 中几个图标的简单示例：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome 示例</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-DJgqvKBg5RpKOFW6JzuxwwBf+OIWqzs1vi9J/BOH4pDjgMqa70P8zeLdXQ+nT2qG" crossorigin="anonymous">
  </head>
  <body>
    <h1>Font Awesome 示例</h1>
    <p>这里是一个 <i class="fas fa-thumbs-up"></i> 点赞的示例</p>
    <p>这里是一个 <i class="fas fa-shopping-cart"></i> 购物车的示例</p>
  </body>
</html>

以上代码会展示一个标题和两个带有图标的段落，如下所示：

Font Awesome 示例

这里是一个 👍 点赞的示例

这里是一个 🛒 购物车的示例