Bootstrap图标库的下载与使用

sky-stars

已于 2024-08-27 20:28:44 修改

阅读量1w

点赞数 12

分类专栏：笔记文章标签： bootstrap 前端框架前端

于 2021-12-30 12:09:52 首次发布

本文链接：https://blog.csdn.net/qq_51917985/article/details/122232698

版权

笔记专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何下载和在项目中使用Bootstrap官方图标库，该库包含近1500个免费、高质量的开源图标。用户可以访问Bootstrap图标库下载网站，选择SVG或web字体形式，将图标资源引入到项目中，如IDEA的web目录下，并通过HTML代码直接引用图标，简化开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

Bootstrap 官方图标库
拥有近 1500 个图标的免费、高质量的开源图标库。你可以以任何方式使用它们，例如 SVG 矢量图、SVG sprite或 web 字体形式。并不局限于使用 Bootstrap 前端框架的项目。本文将进行介绍如何下载使用。

具体操作

1.访问Bootstrap官方图标库下载网站

https://icons.bootcss.com/#install

2.点击安装
在这里插入图片描述
3.此处下载压缩包到本地（可以任选一种）
4.点击 bootstrap-icons-1.7.2.zip 进行下载

在这里插入图片描述
5.保存文件，将里面的文件解压，全部复制到软件中
IDEA要复制到web目录下
6.创建一个新的HTML页面，进行使用
使用代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="./bootstrap-icons-1.7.2/check2.svg" alt="Bootstrap" width="30" height="30">

</body>
</html>

7. 页面效果
在这里插入图片描述 8.更多图标，请参考帮助文档的图片列表
https://icons.bootcss.com/#install

例如：想使用bootstrap定义的闹铃图标，只需要复制图标下面的字符即可，此处为alarm.svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./bootstrap-icons-1.7.2/alarm.svg" alt="Bootstrap" width="30" height="30">
</body>
</html>