Bootstrap 字体图标(Glyphicons)

作者likuolei

在 Bootstrap 5（包括最新版本 5.3.3，截至 2025 年 10 月 11 日），Glyphicons 字体图标已不再是 Bootstrap 的内置功能。Glyphicons 曾在 Bootstrap 3 中作为默认的图标字体库，但从 Bootstrap 4 开始，官方移除了 Glyphicons，以减少框架体积并鼓励使用更现代的图标解决方案（如 Font Awesome、Bootstrap Icons 或其他第三方图标库）。以下是对 Bootstrap 字体图标（包括 Glyphicons 历史和替代方案）的中文讲解，涵盖其背景、当前状态、替代方法及使用示例。

1. Glyphicons 的历史与现状

  • Bootstrap 3：Glyphicons 是内置的图标字体库，提供约 250 个矢量图标，通过 <span> 标签和类名（如 .glyphicon .glyphicon-star）调用。
  • Bootstrap 4 和 5：官方移除 Glyphicons，原因包括：
  • 减少框架体积，优化性能。
  • 鼓励开发者选择更灵活、现代的图标库。
  • Glyphicons 是商业字体，免费版功能有限。
  • 当前替代方案：
  • Bootstrap Icons：Bootstrap 官方提供的免费、开源图标库，推荐使用。
  • Font Awesome：流行的第三方图标库，支持广泛的图标和样式。
  • Material Icons 或其他 SVG 图标库。

以下重点介绍 Bootstrap Icons（官方推荐）以及如何在 Bootstrap 5 项目中集成和使用图标。

2. Bootstrap Icons 简介

Bootstrap Icons 是一个开源的 SVG 图标库，专为 Bootstrap 框架设计，包含超过 2000 个图标，覆盖常见 UI 需求（如箭头、用户、文件、社交媒体等）。其特点包括：

  • 矢量格式：基于 SVG，尺寸可伸缩，适合响应式设计。
  • 独立使用：无需依赖 Bootstrap CSS，可单独引入。
  • 多种引入方式：支持 SVG 直接嵌入、CSS 样式、图标字体等方式。
  • 可定制：通过 CSS 或 SVG 属性调整颜色、大小等。

3. 引入 Bootstrap Icons

Bootstrap Icons 可以通过以下方式引入项目：

(1) 通过 CDN

直接在 HTML 中引入 Bootstrap Icons 的 CSS 文件：

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

(2) 通过 npm 安装

适合模块化项目（如使用 Webpack 或 Vite）：

npm install bootstrap-icons

然后在项目中引入 CSS：

import 'bootstrap-icons/font/bootstrap-icons.css';

或直接引用本地文件：

<link href="node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">

(3) 使用 SVG 文件

Bootstrap Icons 提供单独的 SVG 文件，可直接嵌入 HTML：

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

4. 使用 Bootstrap Icons

Bootstrap Icons 使用 <i> 标签结合类名调用，类名格式为 .bi-{icon-name}。

基本用法

<i class="bi bi-star"></i> 星星图标
<i class="bi bi-heart-fill"></i> 实心心形图标
<i class="bi bi-person"></i> 用户图标

调整大小

通过 CSS 或工具类（如 .fs-*）调整图标大小：

<i class="bi bi-star fs-1"></i> 大图标
<i class="bi bi-star fs-4"></i> 中等图标
<i class="bi bi-star fs-6"></i> 小图标

调整颜色

使用 .text-* 类或 CSS 设置颜色：

<i class="bi bi-star text-primary"></i> 蓝色星星
<i class="bi bi-heart-fill text-danger"></i> 红色心形

结合其他组件

图标常用于按钮、导航、表单等：

  • 按钮中的图标：
  <button type="button" class="btn btn-primary">
    <i class="bi bi-plus"></i> 添加
  </button>
  • 导航中的图标：
  <a class="nav-link" href="#"><i class="bi bi-house"></i> 首页</a>

响应式图标

结合响应式工具类调整图标显示：

<i class="bi bi-star d-none d-md-inline"></i> 中等屏幕及以上显示

5. Glyphicons 的替代方案

如果你需要类似 Glyphicons 的体验，可以选择以下替代方案：

(1) Bootstrap Icons

  • 优点：官方支持、免费、SVG 格式、与 Bootstrap 高度兼容。
  • 图标查找：访问 https://icons.getbootstrap.com/ 浏览完整图标列表。
  • 示例：
  <i class="bi bi-check-circle-fill text-success"></i> 成功
  <i class="bi bi-exclamation-triangle text-warning"></i> 警告

(2) Font Awesome

Font Awesome 是流行的第三方图标库，提供免费和付费图标。

  • 引入：
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
  • 用法：
  <i class="fas fa-star"></i> 星星图标
  <i class="fas fa-heart"></i> 心形图标
  • 优点：图标丰富，支持动画和多层图标。

(3) Material Icons

Google 的 Material Icons 提供简洁的图标集。

  • 引入：
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  • 用法：
  <span class="material-icons">star</span>

6. 定制 Bootstrap Icons

Bootstrap Icons 的样式可以通过 CSS 或 Sass 定制：

  • 颜色：通过 fill 属性或 .text-* 类调整 SVG 图标颜色。
  • 大小：通过 font-size 或 .fs-* 类调整。
  • 自定义 Sass：
  // custom.scss
  $bi-font-size: 1.5rem;
  $bi-color: #ff5733;

  @import "node_modules/bootstrap-icons/font/bootstrap-icons";

7. 完整示例

以下是一个使用 Bootstrap Icons 的综合示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 图标示例</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-4">
    <h2 class="text-center">Bootstrap 图标示例</h2>

    <!-- 基本图标 -->
    <h4>基本图标</h4>
    <p>
      <i class="bi bi-star fs-3"></i> 星星
      <i class="bi bi-heart-fill text-danger fs-3"></i> 心形
      <i class="bi bi-person fs-3"></i> 用户
    </p>

    <!-- 按钮中的图标 -->
    <h4>按钮中的图标</h4>
    <button type="button" class="btn btn-primary">
      <i class="bi bi-plus"></i> 添加
    </button>
    <button type="button" class="btn btn-danger">
      <i class="bi bi-trash"></i> 删除
    </button>

    <!-- 响应式图标 -->
    <h4>响应式图标</h4>
    <p>
      <i class="bi bi-display d-none d-md-inline text-primary fs-2"></i> 中等屏幕显示
    </p>

    <!-- 网格布局中的图标 -->
    <h4>图标网格</h4>
    <div class="row g-3">
      <div class="col-md-3 text-center">
        <i class="bi bi-house-fill fs-1 text-primary"></i>
        <p>首页</p>
      </div>
      <div class="col-md-3 text-center">
        <i class="bi bi-gear-fill fs-1 text-success"></i>
        <p>设置</p>
      </div>
      <div class="col-md-3 text-center">
        <i class="bi bi-chat-fill fs-1 text-warning"></i>
        <p>消息</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

8. 注意事项

  • Glyphicons 不可用：Bootstrap 5 不包含 Glyphicons，若需使用，需手动引入 Glyphicons 字体文件（需购买商业许可或使用免费版本）。
  • 可访问性：为图标添加 aria-label 或 aria-hidden="true"（如果仅装饰用）以支持屏幕阅读器。
  <i class="bi bi-star" aria-hidden="true"></i>
  <button class="btn btn-primary">
    <i class="bi bi-plus" aria-label="添加"></i>
  </button>
  • 性能：使用 CDN 或本地 SVG 文件时，优化图标加载（如按需引入）。
  • 浏览器兼容性：Bootstrap Icons 的 SVG 支持现代浏览器，旧浏览器可能需 polyfill。
  • 图标选择：根据项目需求选择合适的图标库，Bootstrap Icons 适合轻量需求，Font Awesome 适合丰富图标场景。

9. 学习资源

  • Bootstrap Icons 官方文档：https://icons.getbootstrap.com/
  • Bootstrap 官方文档：https://getbootstrap.com/docs/5.3/extend/icons/
  • 中文教程：https://www.bootcss.com/（非官方，部分旧版内容提及 Glyphicons）
  • X 平台：搜索“Bootstrap Icons”或“Bootstrap 图标”，查看社区分享的图标使用技巧。

如果你需要更详细的图标使用讲解（例如动态加载图标、自定义 SVG 图标、结合 JavaScript 交互）或实现特定图标效果的代码，请告诉我，我可以提供进一步的指导或示例！

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注