能否使用Bootstrap Icons通过CSS实现项目符号？

当然可以用CSS伪元素实现Bootstrap Icons作为列表项目符号，和FontAwesome的思路类似，具体步骤如下：

核心CSS实现方案 #

首先确保你已经引入了Bootstrap Icons的字体样式文件，然后通过:before伪元素来设置图标：

/* 自定义列表样式，移除默认项目符号 */
ul.bootstrap-icon-list {
  list-style: none;
  padding-left: 0;
}

/* 给每个列表项添加Bootstrap Icon作为前缀 */
ul.bootstrap-icon-list li::before {
  content: "\f26e"; /* 替换为你需要的图标Unicode码，示例是check图标 */
  font-family: "Bootstrap Icons"; /* 必须指定Bootstrap Icons的字体族 */
  margin-right: 0.5rem; /* 图标和文本之间的间距 */
  color: #0d6efd; /* 可选：自定义图标颜色 */
  font-size: 1.1rem; /* 可选：调整图标大小 */
}

怎么找图标的Unicode码？ #

打开Bootstrap Icons的图标库，找到目标图标后查看详情页，里面会标注该图标的Unicode值（比如check图标对应的是f26e，在CSS里需要写成\f26e）。

替代方案 #

如果觉得找Unicode太麻烦，你可以用已知的两种方法：

• 直接在<li>标签内嵌入图标元素：<li><i class='bi bi-check'></i> 列表内容</li>，这种方式直观，不需要额外CSS配置。
• 若你习惯FontAwesome的类名调用逻辑，也可以继续沿用这种手动添加标签的方式，兼容性更稳定。

内容的提问来源于stack exchange，提问作者Sabal Shrestha