Bootstrap5 字体图标

听海边涛声

已于 2024-09-01 08:58:00 修改

阅读量712

点赞数 8

文章标签： bootstrap 前端

于 2024-09-01 08:31:31 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/141758371

版权

字体图标是在web项目中使用的图标字体。
使用字体图标的好处是：可以通过应用CSS color属性来创建任意元素的图标。此处，要更改图标的大小，只需要使用CSS font-size属性即可。

Bootstrap 官方图标库：https://icons.bootcss.com/
在这里插入图片描述

获取字体图标

可以在Bootstrap 模版以及简单的网页中包含bootstrap字体图标，而无需使用bootstrap框架。利用提供的公共CDN服务并将图标字体的样式添加到网站的<head>标签内，就能立即使用bootstrap图标了。

在这里插入图片描述

步骤一：在HTML文档的<head>标签内引入bootstrap字体图标库的css文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

步骤二：引用图标

找到自己要用的图标，然后点击：
在这里插入图片描述

在这里插入图片描述

然后复制到html页面中：
在这里插入图片描述

到页面刷新，可以看到字体图标引入进来了：
在这里插入图片描述

可以更改字体图标的大小：
在这里插入图片描述

在这里插入图片描述

更改字体图标的颜色：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述