Bootstrap是用于开发响应式和移动优先的网站的CSS框架。Bootstrap增加了一个功能，人们可以使用Bootstrap提供的优质图标。这些图标可以用SVG或网页字体格式。

Bootstrap提供了一千多个高质量的图标，你可以在你的项目中使用它们。你还可以根据需要改变这些图标的颜色和大小。

是什么让Bootstrap框架中的图标与众不同，我们为什么要使用它？

灵活性 “是使它与其他图标解决方案不同的原因。如果你在Bootstrap框架中使用图标，你可以借助CSS的color属性来改变图标的颜色。
你也可以通过使用CSS的font-size属性来改变图标的大小。
在你的项目中使用Bootstrap的图标不是必须的，你可以在有Bootstrap或没有Bootstrap的情况下使用它。

使用Bootstrap图标的基本语法：

Bash

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

<i>元素是一个容器元素，用于添加Bootstrap图标。字符串’bi-‘总是附在图标的类名之前。它指的是Bootstrap图标。类名基本上是我们正在使用的图标的类别。Bootstrap为我们提供了许多类别的图标，如Facebook、Twitter、地球、星星和搜索等。

例子：这是在提交按钮中使用Bootstrap的搜索图标的HTML代码。

Bash

<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  
    <!--Bootstrap Icons CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  
</head>
  
<body class="container">
    <h2>Welcome To GFG</h2>
    <p>
        The below button is using the bi-search 
        class to display the search icon.
    </p>
  
    <!-- We made a button on which Bootstrap 
        icon of 'search' class present -->
    <button type="submit" class="btn btn-primary">
        <span class="bi-search"></span>
        Search
    </button>
</body>
  
</html>

输出：你在按钮上看到的搜索图标是由Bootstrap框架提供的图标，属于类名search.。

1、安装

Bootstrap 图标库已被发布到了 npm，但是仍然可以手动下载并安装。

1.1、通过 npm 安装

通过 npm 安装 Bootstrap 图标库，包括 SVG 图片、sprite 图标和图标字体。

Bash

npm i bootstrap-icons

1.2、下载安装包

GitHub 上有所有已发布的版本，并且在压缩包内包含了所有 SVG 格式的图标、许可证和 readme 文件。package.json 文件也被包含在内，不过这些 npm 脚本主要用于我们的开发流程。

1.3、通过公共 CDN 加载

利用我们提供的公共 CDN 服务并将图标字体的样式表添加到网站的 <head> 标签内（或通过 CSS 的 @import 指令加载）就能立即使用 Bootstrap 图标库了。

Bash

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

Bash

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css");

2、用法

Bootstrap 图标库的所有图标都是 SVG 格式的，因此你可以通过以下几种方式将它们添加到你的 HTML 中，具体使用哪种方式取决于你的项目是如何设置的。我们建议设置 width: 1em（以及可选的 height: 1em），便于你通过 font-size 属性重置图标的大小。

2.1、内嵌

将图标嵌入你的 HTML 页面中（与引用外部图像文件相反）。如下例子中我们对 width 和 height 属性进行了重新设置。

Bash

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

2.2、Sprite

利用 SVG sprite 和 <use> 元素即可插入任何图标。使用图标的文件名作为片段标识符（例如 toggles 就是 #toggles）。SVG sprites 允许你像 <img> 元素一样引用外部文件，并支持 currentColor 的功能以便主题化。

注意！在 chrome 浏览器中，<use> 不能跨域使用。

Bash

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

2.3、作为外部图片文件引用

将 Bootstrap 图标库的 SVG 文件复制到你所选择的目录中，并像引用普通图片一样通过 <img> 元素引入 SVG 图标。

Bash

<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">

2.4、图标字体

Bootstrap 图标库还提供了图标字体文件，并且包括了每个图标及其对应 class 名称。通过在页面中引入图标字体文件，然后根据需要为 HTML 标签添加对应的 class 名称即可（例如 <i class="bi-alarm-clock"></i>）。

使用 font-size 和 color 样式属性可以更改图标的外观。

Bash

<i class="bi-alarm"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

2.5、CSS

你还可以在 CSS 中使用 SVG 图标（当指定十六进制颜色值时务必对某些字符进行转义，例如将 # 字符替换为 %23）。如果未指定 <svg> 元素的 width 和 height 属性，则图标将填满所有可用空间。

如果需要使用 background-size 来调整图标的大小，则必须设置 viewBox 属性。请注意，xmlns 属性是必需的。

Bash

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

3、设置样式

可以通过设置 .text-* 类或自定义 CSS 来改变颜色

Bash

<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

4、无障碍

对与纯装饰性图标，请添加 aria-hidden="true" 属性。否则，请提供适当的替代性文本。根据添加图标的方法和使用位置（例如，作为独立的图片，或者作为按钮等类似组件上的唯一内容），有多种使用方式。以下是几个示例：

Bash

<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>

Bash

<i class="bi-github" role="img" aria-label="GitHub"></i>

Bash

<svg class="bi" ... role="img" aria-label="Tools">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>

Bash

<!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
  ...
  </svg>
</button>

5、SVG 相关问题

SVG 是非常棒的技术，但仍然存在一些需要处理的怪异行为。考虑到 SVG 有多种使用方式，我们在代码中没有包含以下这些属性和处理手段。

已知问题包括：

在 Internet Explorer 和旧版本的 Edge 浏览器钟 SVG 可以获取焦点。在嵌入 SVG 时，请为 <svg>元素添加 focusable="false" 属性。在 Stack Overflow 上有详细解释。
当 SVG 与 <img> 元素一起使用时，屏幕阅读器可能不会将它们视为图片来处理，也可能会完全跳过这类图片。为 <img> 元素设置role="img" 可以避免此类问题。
引用外部的 SVG sprites 图可能在 Internet Explorer 浏览器中无法正常使用。请根据需要使用svg4everybody polyfill。

四时宝库

程序员的知识宝库

搭建网站在Bootstrap框架中如何使用图标

使用Bootstrap图标的基本语法：

例子：这是在提交按钮中使用Bootstrap的搜索图标的HTML代码。

输出：你在按钮上看到的搜索图标是由Bootstrap框架提供的图标，属于类名search.。

1、安装

1.1、通过 npm 安装

1.2、下载安装包

1.3、通过公共 CDN 加载

2、用法

2.1、内嵌

2.2、Sprite

2.3、作为外部图片文件引用

2.4、图标字体

2.5、CSS

3、设置样式

4、无障碍

5、SVG 相关问题