Bootstrap Glyphicons

Bootstrap 5 与图标（取代 Glyphicons）

Bootstrap 5 中的图标

Bootstrap 3 包含了一套名为 Glyphicons Halflings 的 200 个图标。然而，Glyphicons 未包含在 Bootstrap 4 或 Bootstrap 5 中。

Bootstrap 5 鼓励使用 SVG 作为图标，因为它们具有可伸缩性、无障碍优势以及使用 CSS 进行样式设置的灵活性。虽然 Bootstrap 不再直接将图标集捆绑到其核心 CSS/JS 中，但它有自己的官方开源 SVG 图标库，名为 Bootstrap Icons。

Bootstrap 5 项目中取代 Glyphicons 的替代方案包括：

Bootstrap Icons： 一个免费、高质量、开源的图标库，专为 Bootstrap 组件设计。你可以将它们作为内联 SVG、外部 SVG 或通过 Web 字体包含。（推荐：访问 icons.getbootstrap.com）
Font Awesome： 一个非常流行且丰富的图标库，提供免费版和专业版。
Material Design Icons： Google 的图标集，被广泛使用并提供多种格式。
自定义 SVG： 你可以创建或获取自己的 SVG 图标。

使用 Bootstrap Icons（示例语法）

如果你选择使用 Bootstrap Icons，有几种方法可以集成它们。这里是一个使用 Web 字体方法的示例（需要包含 Bootstrap Icons CSS 文件）：

<!-- 1. 在 <head> 中包含 Bootstrap Icons CSS (例如，来自 CDN) -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> -->

<!-- 2. 使用图标类 -->
<p>
  信封图标: <i class="bi bi-envelope"></i>
</p>
<p>
  按钮上的搜索图标:
  <button type="button" class="btn btn-primary">
    <i class="bi bi-search"></i> Search
  </button>
</p>

<!-- 或者，使用内联 SVG sprite (设置更复杂，但通常更适合性能/定制化) -->
<!--
<svg class="bi me-2" width="1em" height="1em" fill="currentColor">
  <use xlink:href="#envelope"/> // 假设 #envelope 在你的 SVG sprite 中已定义
</svg>
-->

<!--
  学习提示：开始使用 Bootstrap Icons 最简单的方法通常是使用其 CDN 链接获取 CSS 字体版本。
  对于生产环境，考虑仅嵌入你需要的 SVG 以进行优化。
-->

由于本教程侧重于 Bootstrap 核心，而不是特定图标库的实现，因此进一步的图标示例将使用占位符文本或通用描述，表示之前显示图标的位置。

更新示例（不含特定图标符号）

以下示例展示了先前使用 Glyphicons 的元素现在如何构建，可能会带有文本标签或占位符，表示选定图标库中的图标将放置的位置：

<p>
  信封图标: [Envelope Icon] <!-- 像 <i class="bi bi-envelope"></i> 这样的图标的占位符 -->
</p>
<p>
  作为链接的信封图标:
  <a href="#">
    [Envelope Icon] Email Us <!-- 图标占位符 -->
  </a>
</p>
<p>
  搜索图标: [Search Icon] <!-- 占位符 -->
</p>
<p>
  带样式的按钮上的搜索图标:
  <button type="button" class="btn btn-outline-secondary">
    <!-- 示例: <i class="bi bi-search"></i> --> Search
  </button>
</p>
<p>
  带样式的按钮上的搜索图标:
  <button type="button" class="btn btn-info">
    <!-- 示例: <i class="bi bi-search"></i> --> Search
  </button>
</p>
<p>
  打印图标: [Print Icon] <!-- 占位符 -->
</p>
<p>
  带样式的链接按钮上的打印图标:
  <a class="btn btn-success btn-lg" href="#">
    <!-- 示例: <i class="bi bi-printer"></i> --> Print Document
  </a>
</p>

<!--
  实际应用：图标通过为操作或信息提供快速视觉提示来增强用户体验。
  常见障碍：选择图标库并正确集成。对于 Bootstrap 项目，Bootstrap Icons 是一个不错的起点。
-->

现代图标用法参考

有关在 Bootstrap 5 中使用图标的全面信息，包括官方的 Bootstrap Icons 库，请访问：Bootstrap Icons 官方网站。

你也可以探索其他流行的库，如 Font Awesome 或 Material Icons，并遵循各自的集成指南。