Bootstrap5字体图标
字体图标是在Web项目中使用的图标字体。
使用字体图标的好处是,可以通过应用CSS color属性来创建任何颜色的图标。此外,要更改图标的大小,只需使用CSS font-size属性即可。
获取字体图标
在网页中包含Bootstrap5图标的最简单方法是使用CDN链接。此CDN链接基本上指向一个远程CSS文件,其中包含生成字体图标所需的所有类。
我们可以在Bootstrap模板以及简单的网页中包含Bootstrap图标,而无需使用Bootstrap框架。利用提供的公共CDN服务并将图标字体的样式表添加到网站的<head>标签内。
步骤一:在HTML文档的<head>部分包含下面的Bootstrap CDN链接。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
步骤二:要将图标放置到网页中,使用语法<i class="bi-"></i>,其中代表特定图标的类名。
<i class="bi bi-wechat"></i>
向图标应用字体样式以更改颜色/大小等
<i class="bi bi-wechat fs-1 text-success"></i>