Font Awesome 是一个流行的图标库,可以在网站和应用程序中使用。它以字体的形式提供了几百个可缩放的图标,可以通过 CSS 控制。以下是几种常见的 Font Awesome 页面引入方式:
- 通过 CDN 引入
可以通过将以下代码添加到 HTML 文件内来引入 Font Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-RJ74WZZTR6UvC6Fkjlij6hhTYX9HmCiAzUSvRzIov2mKMJ8iWIFMvrETvSNudmxpK3/e3bnJs05OlnJVzOr1g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
这将从 Font Awesome 的 CDN 上加载基本 CSS 文件,其中包含所有图标和必需的样式。在 HTML 文件中,可以使用 Font Awesome 的类名称来显示所需的图标。
- 下载 Font Awesome 压缩包
可以从 Font Awesome 的官方网站下载压缩包,其中包含 CSS、字体和 SVG 文件。下载并解压缩后,将 CSS 文件链接到 HTML 文件中:
<link rel="stylesheet" href="./fontawesome-free-5.15.3-web/css/all.min.css">
使用下载版本需要在本地上述目录中获得 fontawesome-free-5.15.3-web 文件夹。
- 使用 Font Awesome 的 NPM 包
可以使用 NPM 安装 Font Awesome 的包,并通过以下命令将其添加到项目中:
npm install @fortawesome/fontawesome-free
在应用程序中引入 CSS 文件:
import '@fortawesome/fontawesome-free/css/all.css';
- 使用 React 和 Angular 的插件
Font Awesome 提供了 React 和 Angular 的插件,可以方便地在这些框架内使用它。可以安装 Font Awesome React 或 Angular 插件,并按照说明将其添加到项目中。
应用场景:
- 在导航栏中显示图标
- 在按钮上使用图标
- 在列表中的每行前面添加图标以表示不同的类别
- 在表单中使用图标
- 在网页的其他部分中使用图标以提高可读性、引人注目,或为其带来风格