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

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

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

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

　　元素是一个容器元素，用于添加Bootstrap图标。字符串’bi-‘总是附在图标的类名之前。它指的是Bootstrap图标。类名基本上是我们正在使用的图标的类别。Bootstrap为我们提供了许多类别的图标，如Facebook、Twitter、地球、星星和搜索等。
　　Bootstrap 图标库已被发布到了 npm，但是仍然可以手动下载并安装。
　　通过 npm 安装 Bootstrap 图标库，包括 SVG 图片、sprite 图标和图标字体。
　　GitHub 上有所有已发布的版本，并且在压缩包内包含了所有 SVG 格式的图标、许可证和 readme 文件。package.json 文件也被包含在内，不过这些 npm 脚本主要用于我们的开发流程。
　　利用我们提供的公共 CDN 服务并将图标字体的样式表添加到网站的标签内（或通过 CSS 的 @import 指令加载）就能立即使用 Bootstrap 图标库了。
　　Bootstrap 图标库的所有图标都是 SVG 格式的，因此你可以通过以下几种方式将它们添加到你的 HTML 中，具体使用哪种方式取决于你的项目是如何设置的。我们建议设置 width: 1em（以及可选的 height: 1em），便于你通过 font-size 属性重置图标的大小。
　　将图标嵌入你的 HTML 页面中（与引用外部图像文件相反）。如下例子中我们对 width 和 height 属性进行了重新设置。
　　利用 SVG sprite 和元素即可插入任何图标。使用图标的文件名作为片段标识符（例如 toggles 就是 #toggles）。SVG sprites 允许你像元素一样引用外部文件，并支持 currentColor 的功能以便主题化。　　注意！在 chrome 浏览器中，不能跨域使用。　　将 Bootstrap 图标库的 SVG 文件复制到你所选择的目录中，并像引用普通图片一样通过元素引入 SVG 图标。　　Bootstrap 图标库还提供了图标字体文件，并且包括了每个图标及其对应 class 名称。通过在页面中引入图标字体文件，然后根据需要为 HTML 标签添加对应的 class 名称即可（例如）。
　　使用 font-size 和 color 样式属性可以更改图标的外观。
　　你还可以在 CSS 中使用 SVG 图标（当指定十六进制颜色值时务必对某些字符进行转义，例如将 # 字符替换为 %23）。如果未指定
　　如果需要使用 background-size 来调整图标的大小，则必须设置 viewBox 属性。请注意，xmlns 属性是必需的。
　　可以通过设置 .text-* 类或自定义 CSS 来改变颜色
　　对与纯装饰性图标，请添加 aria-hidden="true" 属性。否则，请提供适当的替代性文本。根据添加图标的方法和使用位置（例如，作为独立的图片，或者作为按钮等类似组件上的唯一内容），有多种使用方式。以下是几个示例：
　　SVG 是非常棒的技术，但仍然存在一些需要处理的怪异行为。考虑到 SVG 有多种使用方式，我们在代码中没有包含以下这些属性和处理手段。
　　已知问题包括：在 Internet Explorer 和旧版本的 Edge 浏览器钟 SVG 可以获取焦点。在嵌入 SVG 时，请为元素一起使用时，屏幕阅读器可能不会将它们视为图片来处理，也可能会完全跳过这类图片。为元素设置role="img" 可以避免此类问题。引用外部的 SVG sprites 图可能在 Internet Explorer 浏览器中无法正常使用。请根据需要使用svg4everybody polyfill。