Bootstrap-HTML（七）Bootstrap在线图标的引用方法
前言
- 在 之前的博客 中，我们学习了 Bootstrap5 的按钮与按钮组样式，这些组件能让网页交互更直观。而在实际开发中，图标是提升界面可读性和美观度的重要元素。
- Bootstrap 官方提供了一套专门的图标库——Bootstrap Icons，它包含大量免费、开源的 SVG 图标，可直接与 Bootstrap 组件搭配使用。本文将详细介绍如何引用这些在线图标，以及如何灵活调整其样式。
我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343
我的的Bootstrap5博客专栏
https://blog.csdn.net/2402_83322742/category_12848026.html?spm=1001.2014.3001.5482
一、Bootstrap Icons 简介
Bootstrap Icons 是 Bootstrap 官方推出的图标库，具有以下特点：
- 免费开源：无需授权即可用于商业和非商业项目；
- SVG 格式：图标以 SVG 为基础，支持无损缩放，适配各种屏幕尺寸；
- 丰富多样：包含超过 2000 个常用图标（如导航、交互、工具类等），覆盖大部分开发场景；
- 无缝兼容：与 Bootstrap 组件完美配合，可直接通过类名调用，无需额外配置。
官网地址：https://icons.getbootstrap.com/（可在官网搜索并复制图标类名或 SVG 代码）
二、引用Bootstrap在线图标的方法
（一）通过 CDN 引入 CSS 文件（推荐）
Bootstrap Icons 提供了在线 CSS 文件，通过 CDN 引入后，可直接使用类名调用图标，步骤如下：
- 引入 CDN 链接：在 HTML 的
<head>中添加 Bootstrap Icons 的 CSS 链接（建议与 Bootstrap 核心样式一起引入）； - 使用图标类名：通过
<i>标签（或<span>）配合bi基础类 + 具体图标类名（如bi-search）调用图标。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap5 核心 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入 Bootstrap Icons CSS（在线） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<!-- 基础图标示例 -->
<i class="bi bi-search"></i> <!-- 搜索图标 -->
<i class="bi bi-home"></i> <!-- 首页图标 -->
<i class="bi bi-user"></i> <!-- 用户图标 -->
<i class="bi bi-gear"></i> <!-- 设置图标 -->
<i class="bi bi-check"></i> <!-- 确认图标 -->
</body>
</html>
说明：
- 图标类名格式为
bi bi-图标名称，其中bi是基础类，bi-图标名称是具体图标（图标名称可在官网搜索获取）； - 这种方法无需下载图标文件，直接在线引用，适合快速开发。
（二）直接使用在线 SVG 代码
如果需要对图标进行高度定制（如修改颜色、尺寸、路径），可直接从官网复制 SVG 代码并嵌入 HTML 中，步骤如下：
- 在官网找到目标图标：打开 Bootstrap Icons 官网，搜索并点击图标；
- 复制 SVG 代码：点击图标后，选择“Copy SVG”复制完整代码；
- 粘贴到 HTML 中：直接将 SVG 代码粘贴到需要显示图标的位置。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用SVG代码引用图标</title>
</head>
<body>
<!-- 直接粘贴从官网复制的SVG代码 -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="red" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
</body>
</html>
说明：
- SVG 代码中的
width、height可直接修改尺寸，fill可修改颜色（如fill="red"）； - 适合需要个性化定制图标的场景，但代码量会增加。
三、Bootstrap图标样式调整
Bootstrap 图标支持通过工具类调整样式，与 Bootstrap 的通用样式类兼容，常见调整方式如下：
（一）调整图标大小
使用 fs-* 类（字体大小工具类）调整图标尺寸（fs-1 到 fs-6，数值越大尺寸越大）：
<i class="bi bi-star fs-1"></i> <!-- 最大尺寸 -->
<i class="bi bi-star fs-3"></i> <!-- 中等尺寸 -->
<i class="bi bi-star fs-6"></i> <!-- 最小尺寸 -->
（二）调整图标颜色
使用 text-* 类（文本颜色工具类）修改图标颜色：
<i class="bi bi-check-circle text-success fs-2"></i> <!-- 成功色（绿色） -->
<i class="bi bi-exclamation-circle text-warning fs-2"></i> <!-- 警告色（黄色） -->
<i class="bi bi-x-circle text-danger fs-2"></i> <!-- 危险色（红色） -->
（三）图标旋转与翻转
使用 bi-rotate-*（旋转）和 bi-flip-*（翻转）类调整图标方向：
<i class="bi bi-arrow-right"></i> <!-- 原始方向 -->
<i class="bi bi-arrow-right bi-rotate-90"></i> <!-- 旋转90度 -->
<i class="bi bi-arrow-right bi-flip-horizontal"></i> <!-- 水平翻转 -->
<i class="bi bi-arrow-right bi-flip-vertical"></i> <!-- 垂直翻转 -->
四、图标与其他组件结合使用
图标常与按钮、导航、卡片等组件搭配，增强交互体验，示例如下：
（一）按钮中的图标
在按钮内添加图标，使操作更直观：
<button class="btn btn-primary">
<i class="bi bi-save me-2"></i>保存
</button>
<button class="btn btn-danger">
<i class="bi bi-trash me-2"></i>删除
</button>
<button class="btn btn-outline-dark">
<i class="bi bi-share"></i>
</button>
（二）导航中的图标
在导航项中添加图标，提升导航辨识度：
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="bi bi-house-door me-1"></i>首页
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-compass me-1"></i>发现
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-bell me-1"></i>通知
</a>
</li>
</ul>
我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343
我的的Bootstrap5博客专栏
https://blog.csdn.net/2402_83322742/category_12848026.html?spm=1001.2014.3001.5482
| 非常感谢您的阅读，喜欢的话记得三连哦 |
