如何在Quarto Reveal.js演示文稿中用Font Awesome图标作为项目符号？

要把Font Awesome图标作为项目符号，核心是利用CSS伪元素::before生成图标，替换默认列表符号。以下是修改后的代码，直接替换你原有的CSS即可：

/* 第一级无序列表 */
.reveal ul {
  list-style-type: none;
  list-style-position: inside;
  padding-left: 0;
}

.reveal ul > li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f111"; /* 实心圆图标 */
  margin-right: 8px; /* 图标与文字的间距 */
}

/* 第二级无序列表 */
.reveal ul ul {
  list-style-type: none;
  padding-left: 20px; /* 缩进距离 */
}

.reveal ul ul > li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  content: "\f10c"; /* 空心圆图标 */
  margin-right: 8px;
}

/* 第三级无序列表 */
.reveal ul ul ul {
  list-style-type: none;
  padding-left: 40px;
}

.reveal ul ul ul > li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0c8"; /* 实心方块图标 */
  margin-right: 8px;
}

/* 第四级无序列表 */
.reveal ul ul ul ul {
  list-style-type: none;
  padding-left: 60px;
}

.reveal ul ul ul ul > li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  content: "\f096"; /* 空心方块图标 */
  margin-right: 8px;
}

关键说明 #

1. 移除默认符号：把所有list-style-type改成none，避免默认符号和图标重复
2. 图标设置：
   • font-family要匹配你的Font Awesome版本（比如v5用"Font Awesome 5 Free"）
   • font-weight：实心图标用900，空心/常规图标用400
   • content里的Unicode值对应具体图标，你可以直接在Font Awesome官网搜索图标后复制对应代码
3. 排版调整：通过padding-left控制各级列表的缩进，margin-right调整图标和文字的间距，按需修改数值即可

如果需要使用品牌类图标，把font-family改成"Font Awesome 6 Brands"，同时去掉font-weight设置即可。

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