Material Icon作为li元素::marker/::before不生效的问题排查

核心原因 #

1. 字体导入语法错误：你的<link>标签中，display=block与后续字体参数的分隔符使用错误，应该用&而非冒号，这会导致字体无法正确加载完整的可变字体配置。
2. 伪元素未指定字体族：.material-symbols-rounded类仅作用于普通元素，::marker/::before伪元素不会自动继承该类的字体设置，必须单独指定font-family为Material Symbols Rounded。
3. 字体参数未生效：图标渲染依赖可变字体参数（如wght、FILL），若参数未正确传递给伪元素，会导致图标无法正常显示。

修复步骤 #

1. 修正字体导入链接 #

将原<link>标签的参数分隔符改为&，直接指定你需要的字体参数，确保字体完整加载：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded&display=block&opsz,wght,FILL,GRAD@20..48,300,0,200" />

2. 方法一：使用::marker伪元素 #

Chrome 114支持::marker自定义字体，直接为<li>的标记指定字体和图标内容：

li::marker {
  font-family: 'Material Symbols Rounded';
  content: '\e2c7'; /* 文件夹图标码点 */
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 200, 'opsz' 48;
  color: #666; /* 可选：自定义图标颜色 */
}

3. 方法二：使用::before伪元素（兼容性更广） #

若担心::marker的兼容性，改用::before并隐藏默认列表标记：

li {
  list-style-type: none;
  position: relative;
  padding-left: 1.5em; /* 为图标预留空间 */
}

li::before {
  content: '\e2c7';
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 200, 'opsz' 48;
  position: absolute;
  left: 0;
  color: #666;
}

4. 备用：使用连字方式 #

若码点仍无法渲染，可改用图标对应的连字（Material Symbols Rounded默认支持连字）：

/* 替换content值为连字 */
content: 'folder';

验证要点 #

• 打开Chrome开发者工具的Network面板，确认字体文件已成功加载（无404或加载失败）。
• 检查伪元素的font-family和font-variation-settings是否正确应用（可在Elements面板的Styles标签中查看）。

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