Bootstrap图标库的下载与使用

文章目录

  • 前言
  • 具体操作
  • 总结


前言

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


具体操作

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

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

2.点击安装
Bootstrap图标库的下载与使用_第1张图片
3.此处下载压缩包到本地(可以任选一种)
Bootstrap图标库的下载与使用_第2张图片4.点击 bootstrap-icons-1.7.2.zip 进行下载

Bootstrap图标库的下载与使用_第3张图片
5.保存文件,将里面的文件解压,全部复制到软件中
Bootstrap图标库的下载与使用_第4张图片IDEA要复制到web目录下
Bootstrap图标库的下载与使用_第5张图片6.创建一个新的HTML页面,进行使用
Bootstrap图标库的下载与使用_第6张图片使用代码如下

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

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

body>
html>

7. 页面效果
Bootstrap图标库的下载与使用_第7张图片8.更多图标,请参考帮助文档的图片列表
https://icons.bootcss.com/#install
Bootstrap图标库的下载与使用_第8张图片
例如:想使用bootstrap定义的闹铃图标,只需要复制图标下面的字符即可,此处为alarm.svg
Bootstrap图标库的下载与使用_第9张图片

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

总结

Bootstrap图标库提供了很多图标供我们使用,使开发更便捷,不会再为图标而烦恼了,关于Bootstrap图标库的更多介绍请参考官网
https://icons.bootcss.com/#install


你可能感兴趣的:(笔记,bootstrap,前端框架,前端)