搭建网站在Bootstrap框架中如何使用图标
ccwgpt 2024-11-07 09:49 112 浏览 0 评论
Bootstrap是用于开发响应式和移动优先的网站的CSS框架。Bootstrap增加了一个功能，人们可以使用Bootstrap提供的优质图标。这些图标可以用SVG或网页字体格式。
Bootstrap提供了一千多个高质量的图标，你可以在你的项目中使用它们。你还可以根据需要改变这些图标的颜色和大小。
是什么让Bootstrap框架中的图标与众不同，我们为什么要使用它？
- 灵活性 “是使它与其他图标解决方案不同的原因。如果你在Bootstrap框架中使用图标，你可以借助CSS的color属性来改变图标的颜色。
- 你也可以通过使用CSS的font-size属性来改变图标的大小。
- 在你的项目中使用Bootstrap的图标不是必须的，你可以在有Bootstrap或没有Bootstrap的情况下使用它。
使用Bootstrap图标的基本语法：
<i class="bi-class-name"></i><i>元素是一个容器元素，用于添加Bootstrap图标。字符串’bi-‘总是附在图标的类名之前。它指的是Bootstrap图标。类名基本上是我们正在使用的图标的类别。Bootstrap为我们提供了许多类别的图标，如Facebook、Twitter、地球、星星和搜索等。
例子：这是在提交按钮中使用Bootstrap的搜索图标的HTML代码。
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!--Bootstrap Icons CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body class="container">
<h2>Welcome To GFG</h2>
<p>
The below button is using the bi-search
class to display the search icon.
</p>
<!-- We made a button on which Bootstrap
icon of 'search' class present -->
<button type="submit" class="btn btn-primary">
<span class="bi-search"></span>
Search
</button>
</body>
</html>输出：你在按钮上看到的搜索图标是由Bootstrap框架提供的图标，属于类名search.。
1、安装
Bootstrap 图标库 已被发布到了 npm，但是仍然可以手动下载并安装。
1.1、通过 npm 安装
通过 npm 安装 Bootstrap 图标库，包括 SVG 图片、sprite 图标和图标字体。
npm i bootstrap-icons1.2、下载安装包
GitHub 上有所有已发布的版本，并且在压缩包内包含了所有 SVG 格式的图标、许可证和 readme 文件。package.json 文件也被包含在内，不过这些 npm 脚本主要用于我们的开发流程。
1.3、通过公共 CDN 加载
利用我们提供的公共 CDN 服务并将图标字体的样式表添加到网站的 <head> 标签内（或通过 CSS 的 @import 指令加载）就能立即使用 Bootstrap 图标库了。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css");2、用法
Bootstrap 图标库的所有图标都是 SVG 格式的，因此你可以通过以下几种方式将它们添加到你的 HTML 中，具体使用哪种方式取决于你的项目是如何设置的。我们建议设置 width: 1em（以及可选的 height: 1em），便于你通过 font-size 属性重置图标的大小。
2.1、内嵌
将图标嵌入你的 HTML 页面中（与引用外部图像文件相反）。如下例子中我们对 width 和 height 属性进行了重新设置。
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>2.2、Sprite
利用 SVG sprite 和 <use> 元素即可插入任何图标。使用图标的文件名作为片段标识符（例如 toggles 就是 #toggles）。SVG sprites 允许你像 <img> 元素一样引用外部文件，并支持 currentColor 的功能以便主题化。
注意！ 在 chrome 浏览器中，<use> 不能跨域使用。
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#shop"/>
</svg>2.3、作为外部图片文件引用
将 Bootstrap 图标库 的 SVG 文件复制到你所选择的目录中，并像引用普通图片一样通过 <img> 元素引入 SVG 图标。
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">2.4、图标字体
Bootstrap 图标库还提供了图标字体文件，并且包括了每个图标及其对应 class 名称。通过在页面中引入图标字体文件，然后根据需要为 HTML 标签添加对应的 class 名称即可（例如 <i class="bi-alarm-clock"></i>）。
使用 font-size 和 color 样式属性可以更改图标的外观。
<i class="bi-alarm"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>2.5、CSS
你还可以在 CSS 中使用 SVG 图标（当指定十六进制颜色值时 务必对某些字符进行转义，例如将 # 字符替换为 %23）。如果未指定 <svg> 元素的 width 和 height 属性，则图标将填满所有可用空间。
如果需要使用 background-size 来调整图标的大小，则必须设置 viewBox 属性。请注意，xmlns 属性是必需的。
.bi::before {
display: inline-block;
content: "";
vertical-align: -.125em;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}3、设置样式
可以通过设置 .text-* 类或自定义 CSS 来改变颜色
<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
...
</svg>4、无障碍
对与纯装饰性图标，请添加 aria-hidden="true" 属性。否则，请提供适当的替代性文本。根据添加图标的方法和使用位置（例如，作为独立的图片，或者作为按钮等类似组件上的唯一内容），有多种使用方式。以下是几个示例：
<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...><i class="bi-github" role="img" aria-label="GitHub"></i><svg class="bi" ... role="img" aria-label="Tools">
<use xlink:href="bootstrap-icons.svg#tools"/>
</svg><!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
<svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
...
</svg>
</button>5、SVG 相关问题
SVG 是非常棒的技术，但仍然存在一些需要处理的怪异行为。考虑到 SVG 有多种使用方式，我们在代码中没有包含以下这些属性和处理手段。
已知问题包括：
- 在 Internet Explorer 和 旧版本的 Edge 浏览器钟 SVG 可以获取焦点。 在嵌入 SVG 时，请为 <svg>元素添加 focusable="false" 属性。 在 Stack Overflow 上有详细解释。
- 当 SVG 与 <img> 元素一起使用时，屏幕阅读器可能不会将它们视为图片来处理，也可能会完全跳过这类图片。 为 <img> 元素设置role="img" 可以避免此类问题。
- 引用外部的 SVG sprites 图可能在 Internet Explorer 浏览器中无法正常使用。 请根据需要使用svg4everybody polyfill。
相关推荐
- 一个基于.Net Core遵循Clean Architecture原则开源架构
-
今天给大家推荐一个遵循CleanArchitecture原则开源架构。项目简介这是基于Asp.netCore6开发的，遵循CleanArchitecture原则，可以高效、快速地构建基于Ra...
- AI写代码翻车无数次，我发现只要提前做好这3步，bug立减80%
-
写十万行全是bug之后终于找到方法了开发"提示词管理助手"新版本那会儿，我差点被bug整崩溃。刚开始两周，全靠AI改代码架构，结果十万行程序漏洞百出。本来以为AI说没问题就稳了，结果...
- OneCode低代码平台的事件驱动设计:架构解析与实践
-
引言：低代码平台的事件驱动范式在现代软件开发中，事件驱动架构（EDA）已成为构建灵活、松耦合系统的核心范式。OneCode低代码平台通过创新性的注解驱动设计，将事件驱动理念深度融入平台架构，实现了业务...
- 国内大厂AI插件评测:根据UI图生成Vue前端代码
-
在IDEA中安装大厂的AI插件，打开ruoyi增强项目：yudao-ui-admin-vue31.CodeBuddy插件登录腾讯的CodeBuddy后，大模型选择deepseek-v3，输入提示语：...
- AI+低代码技术揭秘(二):核心架构
-
本文档介绍了为VTJ低代码平台提供支持的基本架构组件，包括Engine编排层、Provider服务系统、数据模型和代码生成管道。有关UI组件库和widget系统的信息，请参阅UI...
- GitDiagram用AI把代码库变成可视化架构图
-
这是一个名为gitdiagram的开源工具，可将GitHub仓库实时转换为交互式架构图，帮助开发者快速理解代码结构。核心功能一键可视化：替换GitHubURL中的"hub...
- 30天自制操作系统:第六天:代码架构整理与中断处理
-
1.拆开bootpack.c文件。根据设计模式将对应的功能封装成独立的文件。2.初始化pic:pic(可编程中断控制器)：在设计上，cpu单独只能处理一个中断。而pic是将8个中断信号集合成一个中断...
- AI写代码越帮越忙?2025年研究揭露惊人真相
-
近年来，AI工具如雨后春笋般涌现，许多人开始幻想程序员的未来就是“对着AI说几句话”，就能轻松写出完美的代码。然而，2025年的一项最新研究却颠覆了这一期待，揭示了一个令人意外的结果。研究邀请了16位...
- 一键理解开源项目:两个自动生成GitHub代码架构图与说明书工具
-
一、GitDiagram可以一键生成github代码仓库的架构图如果想要可视化github开源项目：https://github.com/luler/reflex_ai_fast，也可以直接把域名替换...
- 5分钟掌握 c# 网络通讯架构及代码示例
-
以下是C#网络通讯架构的核心要点及代码示例，按协议类型分类整理：一、TCP协议（可靠连接）1.同步通信//服务器端usingSystem.Net.Sockets;usingTcpListene...
- 从复杂到优雅:用建造者和责任链重塑代码架构
-
引用设计模式是软件开发中的重要工具，它为解决常见问题提供了标准化的解决方案，提高了代码的可维护性和可扩展性，提升了开发效率，促进了团队协作，提高了软件质量，并帮助开发者更好地适应需求变化。通过学习和应...
- 低代码开发当道，我还需要学习LangChain这些框架吗?| IT杂谈
-
专注LLM深度应用，关注我不迷路前两天有位兄弟问了个问题：当然我很能理解这位朋友的担忧：期望效率最大化，时间用在刀刃上，“不要重新发明轮子”嘛。铺天盖地的AI信息轰炸与概念炒作，很容易让人浮躁与迷茫。...
- 框架设计并不是简单粗暴地写代码，而是要先弄清逻辑
-
3.框架设计3.框架设计本节我们要开发一个UI框架，底层以白鹭引擎为例。框架设计的第一步并不是直接撸代码，而是先想清楚设计思想，抽象。一个一个的UI窗口是独立的吗？不是的，...
- 大佬用 Avalonia 框架开发的 C# 代码 IDE
-
AvalonStudioAvalonStudio是一个开源的跨平台的开发编辑器（IDE），AvalonStudio的目标是成为一个功能齐全，并且可以让开发者快速使用的IDE，提高开发的生产力。A...
- 轻量级框架Lagent 仅需20行代码即可构建自己的智能代理
-
站长之家（ChinaZ.com）8月30日消息:Lagent是一个专注于基于LLM模型的代理开发的轻量级框架。它的设计旨在简化和提高这种模型下代理的开发效率。LLM模型是一种强大的工具，可以...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- mfc框架 (52)
- abb框架断路器 (48)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- orm框架有哪些 (51)
- 知识框架图 (52)
- ppt框架 (55)
- 框架图模板 (59)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)