logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间:
Color 色彩Button 按钮
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Icons 图标

icons图标库是使用开源的Bootstrap 图标库 拥有近 1300 个图标的免费、高质量的开源图标库。你可以以任何方式使用它们,例如 SVG 矢量图、SVG sprite或 web 字体形式。

图标列表

安装

通过 npm 安装

npm i bootstrap-icons

下载安装包

下载最新版本的 ZIP 压缩包

通过公共 CDN 加载

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css");

用法

Bootstrap 图标库 的图标都是 SVG 格式的,因此你可以通过以下几种方式将他们应用到你的 HTML 中,具体使用哪种方式取决于你的项目是如何设置的。Bootstrap 图标库 width 和 height 设置为1em,便于你通过font-size属性重置图标的大小。

内嵌

将图标嵌入你的 HTML 页面中(与引用外部图像文件相反)。如下例子中我们对 width 和 height 属性进行了重新设置。

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>

作为外部图片文件引用

将 Bootstrap 图标库 的 SVG 文件复制到你所选择的目录中,并像引用普通图片一样通过 <img> 元素引入 SVG 图标。

<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">

图标字体

Bootstrap 图标库还提供了图标字体文件,并且包括了每个图标及其对应 class 名称。通过在页面中引入图标字体文件,然后根据需要为 HTML 标签添加对应的 class 名称即可(例如 <i class="bi-alarm-clock"> </i>)。

使用 font-size 和 color 样式属性可以更改图标的外观。

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;
}

设置样式

可以通过设置 .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>

可访问性

如果图标不是纯装饰性的,请确保提供适当的替代性文本。根据添加图标的方法和使用位置(例如,作为独立的图片或作为按钮等空间的唯一内容),有多种使用方式。以下是几个示例:

示例一:

<!-- 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" ...>
...
</svg>
</button>
index.html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/>
</svg>
index.html
<i class="bi-alarm"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;margin-left:20px"></i>