Question

如何在以下CSS内容属性中插入Google Material Icon“chevron icon right”（https://design.google.com/icons/#ic_chevron_right）：

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

Answer 1

2018年更新

Google删除了之前为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是您为人字形看到的代码。

Answer 2

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

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

Answer 3

试试这个。

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

Answer 4

您可以将此用于rtl模式：

.bullet li a:before {content: '\E5CB';}

Answer 5

如果您已经包含了materialdesignicons.com中的缩小CSS，则只需使用 Material Design Icons （材料设计图标）字体系列：

::after {
    font-family: 'Material Design Icons';
    content: "\f054";
}

还有一个方便的Cheat Sheet。

Answer 6

2021 年 6 月更新

Material Icons 的代码点位于 Google Fonts 网页中的 Material Icons 部分。

第 1 步：包括 Material Icons 样式表。

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

第 2 步：CSS 代码。

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

说明：值 e5cc 是您在下一个链接和图像中看到的 V 形代码。