很不错的两款Bootstrap Icon图标选择组件

很不错的两款Bootstrap Icon图标选择组件是指Font Awesome和Bootstrap Icons。

Font Awesome

前置条件

在使用Font Awesome之前，需要在你的项目中引入Font Awesome的CSS资源。可以使用以下链接：

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

使用方式

Font Awesome提供了多种使用方式，总结起来可以分为以下几种：

1. 作为图标字体（Icon Font）使用

<i class="fas fa-heart"></i>

2. 作为SVG图标（SVG Icon）使用

<svg class="bi bi-heart" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M1.78 2.07C3.16.69 5.38 0 8 0c2.62 0 4.84.69 6.22 2.07C15.31 3.45 16 5.68 16 8c0 2.32-.69 4.55-2.07 6.93-1.38 2.38-3.6 3.56-6.22 3.56s-4.84-1.18-6.22-3.56C1.69 12.55 1 10.32 1 8c0-2.32.69-4.55 2.07-6.93zm11.72 7.62c1.07-1.57 1.61-3.17 1.61-4.72 0-1.54-.54-2.98-1.61-4.39-.96-1.31-2.14-1.97-3.54-1.97s-2.58.66-3.54 1.97C3.54 3.3 3 4.74 3 6.28c0 1.55.54 3.14 1.61 4.72.96 1.32 2.14 1.98 3.54 1.98 1.41 0 2.58-.66 3.54-1.98z"/>
</svg>

3. 自定义图标颜色和大小

<i class="fas fa-heart text-danger fa-2x"></i>

其中，text-danger指定了字体颜色为红色，fa-2x指定了字体大小为原来的2倍。

示例说明

以下是一个简单的示例，展示了如何使用Font Awesome来添加一个心形图标：

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

<div>
  <i class="fas fa-heart"></i>
</div>

Bootstrap Icons

前置条件

在使用Bootstrap Icons之前，需要在你的项目中引入Bootstrap Icons的CSS资源。可以使用以下链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

使用方式

Bootstrap Icons提供了多种使用方式，总结起来可以分为以下几种：

1. 作为图标字体（Icon Font）使用

<i class="bi bi-heart"></i>

2. 作为SVG图标（SVG Icon）使用

<svg class="bi bi-heart" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M1.78 2.07C3.16.69 5.38 0 8 0c2.62 0 4.84.69 6.22 2.07C15.31 3.45 16 5.68 16 8c0 2.32-.69 4.55-2.07 6.93-1.38 2.38-3.6 3.56-6.22 3.56s-4.84-1.18-6.22-3.56C1.69 12.55 1 10.32 1 8c0-2.32.69-4.55 2.07-6.93zm11.72 7.62c1.07-1.57 1.61-3.17 1.61-4.72 0-1.54-.54-2.98-1.61-4.39-.96-1.31-2.14-1.97-3.54-1.97s-2.58.66-3.54 1.97C3.54 3.3 3 4.74 3 6.28c0 1.55.54 3.14 1.61 4.72.96 1.32 2.14 1.98 3.54 1.98 1.41 0 2.58-.66 3.54-1.98z"/>
</svg>

3. 自定义图标颜色和大小

<i class="bi bi-heart text-danger fs-4"></i>

其中，text-danger指定了字体颜色为红色，fs-4指定了字体大小为原来的1.5倍。

示例说明

以下是一个简单的示例，展示了如何使用Bootstrap Icons来添加一个心形图标：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

<div>
  <i class="bi bi-heart"></i>
</div>

通过此攻略，您已经可以熟练地使用Font Awesome和Bootstrap Icons来添加漂亮的图标了。