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

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

news 2025/7/16 5:19:58

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 引入后，可直接使用类名调用图标，步骤如下：

  1. 引入 CDN 链接：在 HTML 的 <head> 中添加 Bootstrap Icons 的 CSS 链接（建议与 Bootstrap 核心样式一起引入）；
  2. 使用图标类名：通过 <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 中，步骤如下：

  1. 在官网找到目标图标：打开 Bootstrap Icons 官网，搜索并点击图标；

在这里插入图片描述

在这里插入图片描述

  1. 复制 SVG 代码：点击图标后，选择“Copy SVG”复制完整代码；
  2. 粘贴到 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

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

在这里插入图片描述

http://www.dtcms.com/a/280218.html

相关文章：

  • 【zynq7020】PS的“Hello World”
  • RHCE认证-Linux 运维知识整合：从基础到进阶的学习路径
  • ESP32S3+VSCode+PlatformIO+Arduino+Freertos开发入门指南：基于Arduino框架的应用开发全流程
  • 多维视角下的可组合性：PTBs 与 EIP-7702 的对比与解析
  • 简单明了的对比PyTorch与TensorFlow
  • 操作系统笔记：进程调度（Process Scheduling）
  • 硬件与软件的桥梁：冯诺依曼体系、操作系统和初始进程的深度解析
  • 排序算法实战（上）
  • 串口通信性能优化
  • 人形机器人：技术落地、场景适配与产业演进
  • 卫星通信链路预算之六：输出回退
  • [RPA] 多页订单的自动处理
  • 高并发四种IO模型的底层原理
  • 【Rust Web】Axum ：构建高性能 Web 服务
  • 快速精准估算光伏电站造价：效率与精度的关键
  • 4.增-demo
  • Java全栈工程师面试实录：从电商支付到AI大模型的应用场景与技术栈解析
  • 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleClickHeart（双击爱心）
  • [INS-30014]无法检查指定的位置是否在CFS上
  • 【PTA数据结构 | C语言版】根据层序序列重构二叉树
  • 陶瓷基复合材料烧结：工业软件国有化在孔隙率控制仿真中的替代
  • [设计模式]C++单例模式的几种写法以及通用模板
  • HTTP请求
  • 医疗数据分析中标准化的作用
  • sglang笔记1： 后端详细阅读版
  • 配置使用SSH与VScode进行连接
  • LLM在腾讯游戏数据分析的实战
  • 论文阅读：arxiv 2025 A Survey on Data Contamination for Large Language Models
  • 深度学习-参数初始化、损失函数
  • 自然语言指令驱动的工业机器人协同学习系统：大语言模型如何重塑智能体协作范式