当前位置：首页 > news >正文

Bootstrap-HTML（七）Bootstrap在线图标的引用方法

news 2025/7/16 6:38:54

Bootstrap-HTML（七）Bootstrap在线图标的引用方法

前言
一、Bootstrap Icons 简介
二、引用Bootstrap在线图标的方法
- （一）通过 CDN 引入 CSS 文件（推荐）
- （二）直接使用在线 SVG 代码
三、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

非常感谢您的阅读，喜欢的话记得三连哦

在这里插入图片描述