如何获取 fontawesome 的脚本 (1)

📌 相关文章

📜 如何获取 fontawesome 的脚本 (1)

📅 最后修改于: 2023-12-03 15:24:53.741000 🧑 作者: Mango

如何获取 FontAwesome 的脚本

FontAwesome 是一款广泛应用于网页、应用程序或打印媒体中的矢量图标字体库，支持数百种图标，包括社交媒体、Web 2.0、体育、音乐、旅行等等。FontAwesome 提供了多种获取脚本的方式，让我们来一一介绍。

1. 安装 npm 包

可以使用 npm 或 yarn 安装 FontAwesome 的 npm 包，并在项目中使用它。这是比较常用的方式，也是比较便捷的方式。

# 使用 npm 安装
npm install --save @fortawesome/fontawesome-free

# 使用 yarn 安装
yarn add @fortawesome/fontawesome-free

下一步就是在项目中使用 FontAwesome，可以通过在 HTML 文件或 JSX 文件中引入所需图标的 CSS class 来使用。

<head>
  <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" />
</head>

<body>
  ...
  <i class="fas fa-envelope"></i>
  ...
</body>

2. 通过 CDN 引入

FontAwesome 可以通过 CDN 引入，直接在 HTML 文件中添加 link 标签即可。这种方式不需要下载和设置，但需要在加载 FontAwesome 时加载外部资源，可能会稍微影响网页的加载速度。

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-e7+eyOPC1uVgKjAkpO1tJ / ERCLggPtbKA7rX5pXKtz3ZB+2ZGQM7Q2tj5BqINyk" crossorigin="anonymous">
</head>

<body>
  ...
  <i class="fas fa-envelope"></i>
  ...
</body>

3. 下载压缩包

可以在 FontAwesome 的官网 https://fontawesome.com/download 下载 FontAwesome 的压缩包，其中包含了所需的字体文件和 CSS 样式文件。下载后将文件解压到项目中，然后在 HTML 文件或 JSX 文件中引入所需图标的 CSS class 即可。

<head>
  <link rel="stylesheet" href="fontawesome-free-5.13.0-web/css/all.min.css">
</head>

<body>
  ...
  <i class="fas fa-envelope"></i>
  ...
</body>

以上是三种获取 FontAwesome 的脚本的方式，根据不同的使用场景选择合适的方式即可。