如何在网站的项目符号与编号列表中添加Boxicons图标？

云原生阿岚

2026-9-26

列表项目符号/编号添加Boxicons图标实现方案

前置检查

首先确认Boxicons资源已正确引入到项目中，可通过浏览器开发者工具的网络面板确认资源加载成功，无404报错。

方案1：CSS伪元素全局替换（适合统一列表样式场景）

无序列表替换步骤

先清除ul默认样式，预留图标显示空间

ul {
  list-style: none;
  padding-left: 0;
}
ul li {
  position: relative;
  padding-left: 28px; /* 数值根据图标大小调整 */
}

用::before伪元素插入Boxicons图标

ul li::before {
  /* Boxicons必填字体配置，拼写错误会导致图标不显示 */
  font-family: 'boxicons';
  font-weight: normal;
  font-style: normal;
  /* 替换为你需要的图标对应Unicode编码，编码前加反斜杠 */
  content: '\eb3a';
  position: absolute;
  left: 0;
  top: 2px; /* 调整垂直对齐位置适配行高 */
  font-size: 20px;
  color: #333;
}

有序列表替换步骤

启用CSS计数器实现编号逻辑，清除默认样式

ol {
  list-style: none;
  padding-left: 0;
  counter-reset: list-num;
}
ol li {
  position: relative;
  padding-left: 35px;
  counter-increment: list-num;
}

伪元素同时插入图标和序号

ol li::before {
  font-family: 'boxicons';
  /* 图标编码后加空格，拼接计数器生成的序号 */
  content: '\ea97 ' counter(list-num) '.';
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 18px;
  color: #2385bb;
}

方案2：HTML直接插入图标标签（适合单个列表自定义场景）

无需修改全局CSS，直接在li内容前插入Boxicons的<i>标签即可，可灵活给不同列表项配置不同图标：

<ul>
  <li><i class='bx bx-check-square'></i> 已完成任务1</li>
  <li><i class='bx bx-check-square'></i> 已完成任务2</li>
  <li><i class='bx bx-radio-circle'></i> 待完成任务3</li>
</ul>