css - 如何使用 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: "";
}

score 52 · Accepted Answer

2018年更新

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

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

<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 形的代码。

score 12 · Accepted Answer

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

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

score 5 · Accepted Answer

Try this.

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

score 2 · Accepted Answer

2

您可以将其用于 rtl 模式：

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

于 2017-07-17T14:18:11.910 回答

score 1 · Accepted Answer

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

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

还有一个方便的备忘单。

score 0 · Accepted Answer

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是您在下一个链接和图像中看到的人字形代码。

6 回答 6