import fontawesome - CSS (1)

📌 相关文章

📜 import fontawesome - CSS (1)

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

使用 FontAwesome CSS 字体图标

FontAwesome 是一个流行的字体图标库，它包含了大量的图标，使得开发者可以方便地在网站或应用程序中使用。

导入 FontAwesome

要使用 FontAwesome，我们可以通过以下方式导入它的 CSS 样式文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-Mm80T1zRi1iq/HpLYzdbetP9X9ZQlITh3xTwBlbBCgl+OtDvT+nLsRJVVMIpBnmO++X9/D0gJUfULgrbl0F0Uw==" crossorigin="anonymous" />

这将在你的 HTML 文件中引入 FontAwesome 的所有图标和样式。

使用 FontAwesome 图标

在载入 FontAwesome 后，我们可以使用它的图标了。在 HTML 中，我们可以使用如下代码：

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

这段代码会在页面中显示一个拇指向上的图标。其中 fas 表示图标展示的风格，fa-thumbs-up 表示具体的图标名称。

如果你想改变图标的大小，可以使用如下的 CSS 代码：

.fa-2x {
  font-size: 2em;
}

这里 fa-2x 是一个类选择器，它会将选择的元素的大小调整为默认大小的两倍。

示例

下面是一个通过 FontAwesome 引入图标的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FontAwesome 示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-Mm80T1zRi1iq/HpLYzdbetP9X9ZQlITh3xTwBlbBCgl+OtDvT+nLsRJVVMIpBnmO++X9/D0gJUfULgrbl0F0Uw==" crossorigin="anonymous" />
  <style>
    .fa-2x {
      font-size: 2em;
    }
  </style>
</head>
<body>
  <p>这是一个 <i class="fas fa-thumbs-up fa-2x"></i> 的字体图标。</p>
</body>
</html>