如何使用 Google 材质图标设置 CSS 内容属性？

Question

如何在以下 CSS 内容属性:

中插入 Google 素材图标 "chevron icon right" (https://design.google.com/icons/#ic_chevron_right)

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

Answer 1

试试这个。

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

Answer 2

2018年更新

Google 删除了之前为 IE9 及以下版本显示的代码。要获取代码，请访问 GitHub 存储库中的代码点文件。

第 1 步：包含 Material 图标样式表。

<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 3

您可以将其用于 rtl 模式：

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

Answer 4

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

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

Answer 5

如果您已经包含 materialdesignicons.com 的缩小版 CSS，那么只需使用 Material Design Icons 字体系列即可：

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

还有一个方便的Cheat Sheet可用。

Answer 6

2021 年 6 月更新

Material 图标的代码点位于 Google 字体网页的 Material 图标部分。

第 1 步：包含 Material 图标样式表。

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

第 2 步：CSS 代码。

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

解释：值e5cc是您在下一个link和图像中看到的人字形代码。

How to get the content code of chevron icon

How to set the CSS content property with a Google Material Icon?