能否将Bootstrap 5图标与CSS伪元素配合使用？附Glyphicons相关疑问

1. Bootstrap 5图标与CSS伪元素的配合使用 #

Bootstrap 5默认采用SVG格式的图标库，和Glyphicons这类字体图标实现逻辑不同，无法直接通过Unicode字符在伪元素中调用，但可以通过两种方式实现类似效果：

方法一：将SVG转为Data URI嵌入伪元素 #

把目标Bootstrap图标的SVG代码转成Base64编码的Data URI，在::before/::after伪元素的content属性中调用，同时调整尺寸、颜色等样式：

/* 示例：用Bootstrap铅笔图标作为列表项前置图标 */
.list-item::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pencil' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'%3E%3C/path%3E%3C/svg%3E");
  margin-right: 8px;
  vertical-align: middle;
}

方法二：使用背景图方式 #

将SVG图标保存为独立文件，通过background-image在伪元素中调用，配合设置背景尺寸、定位：

.list-item::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-image: url("pencil.svg");
  background-size: cover;
  vertical-align: middle;
}

2. Glyphicons的开源属性与单独使用 #

• 授权说明：Glyphicons Halflings并非完全开源免费，协议规定非商业项目可免费使用，商业项目需购买官方授权许可证。
• 单独使用可行性：可以脱离Bootstrap单独下载使用，获取完整图标包后，引入自带的字体文件和CSS样式，即可独立调用图标，无需依赖Bootstrap框架。

内容的提问来源于stack exchange，提问作者Phillip Senn