如何使用Google Material Icon设置CSS内容属性？

Question

如何在以下CSS内容属性中插入Google Material Icon"chevron icon right"(https://design.google.com/icons/#ic_chevron_right):

.bullet li a:before {
    content: "";
}

Answer 1

2018年更新

谷歌删除了之前为IE9及以下版本显示的代码.要获取代码,请访问GitHub存储库中的codepoints文件.

第1步:包含材料图标样式表.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

第2步 :

CSS代码:

.bullet li a:before {
    font-family: "Material Icons";
    content: "\e5cc";
}

说明:该值e5cc是您为V形符号看到的代码.

对于支持CSS功能[`font-feature-settings`]（https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings）的现代浏览器，您只需使用图标的名称即可而不是代码点：`.bullet li a：before {font-family：“ Material Icons”; content：“ chevron_right”}` (2认同)

Answer 2

2022 年更新

使用概述的新材料符号

.selector::before {
    font-family: "Material Symbols Outlined";
    content: "\e5cc";
}

Answer 3

尝试这个。

.bullet li a:before {
    font-family: FontAwesome;
    content: "\f054";
}

Answer 4

::before {
    font-family: 'Material Icons';
    content: "\E87C";
}

::after {
    font-family: 'Material Icons';
    content: "face";
}