CSS：使用 Material Icon 作为 ：：marker 或 ：：before 使 li 元素不起作用

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

.material-symbols-rounded {
    font-variation-settings:
    'FILL' var(--fill-icons),
    'wght' 300,
    'GRAD' 200
}

li::marker {
    font-family: 'Material Icons Rounded';
    content: "\e2c7";
    color: white;
    display: inline-block;
    margin-right: 6px;
}

li::marker {
    font-family: 'Material Symbols Rounded';
    content: "\e2c7";
}

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

<ul>
  <li></li>
</ul>

Css相关问答推荐

CSS动画与不正确的时间比率

需要Angular material 下拉面板有向下和向上箭头按钮

在AND设计令牌上使用不同的主题

将CSS栅格行高设置为其余视口高度

如何使背景出现在具有自己背景 colored颜色 的子元素上

当值小于 1 时理解 flex-shrink

在 CSS 中，如何用破折号填充段落中每一行的空白区域？

为什么所有选项卡都没有显示在 React 的 MUI 选项卡组件中？

有人可以解释为什么我的 CSS 转换如此突然吗？

使用带有 fr 单位的 calc 函数

如何在保持默认外观的同时更改 javaFX 中按钮的突出显示 colored颜色

老虎机插槽上的 CSS 对齐问题

在移动设备上touch 屏幕边缘的元素(Material UI)

如何在 CSS 中控制列表样式类型光盘的大小？

HTML/CSS 中的单选/复选框对齐

css3 nth 类型限制为类

从 css 添加标题属性

弹性框中的边距折叠

如何停止 setTimeout 循环？

为什么是垂直对齐：文本顶部；不能在 CSS 中工作