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

Question

我应如何在下列CSS content属性中插入Google Material图标“向右箭头” (https://design.google.com/icons/#ic_chevron_right)？

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

- Max

---

简而言之，图标目录中称为“代码点”，例如箭头向上的图标的代码点内容为e5d8，您可以在CSS中引用它，如content: "\e5d8";。https://fonts.google.com/icons?icon.query=arrow - Jesse Nickles

Answer 1

2018年的更新

谷歌已移除了早期在IE9及以下版本中显示的代码。要获取代码，请访问GitHub存储库中的codepoints文件。

codepoints在GitHub存储库的链接：https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints

---

步骤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是你在chevron中看到的代码。

- Sarvap Praharanayuthan

---

对于支持CSS属性font-feature-settings的现代浏览器，您可以直接使用图标的名称而不是代码点：.bullet li a:before { font-family: "Material Icons"; content: "chevron_right" }。 - Joe

Answer 2

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

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

http://codepen.io/estelle/pen/MwvOjd

- Daniel Delgado

---

没想到在 content 属性中可以直接通过名称引用图标 - 不错的技巧！ - Pavel Ye

Answer 3

2022 年更新

使用新的材料设计符号轮廓化。

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

Reference here

- Funk Doc

Answer 4

试试这个。

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

您可以在此处查看内容值

该链接提供了有关内容值的信息。

- Bhavin Shah

---

记得也设置字体族 :P - Medda86

好的... 你是否包含了谷歌材料设计所需的CSS、字体和API？ - Bhavin Shah

我已经包含了MDL。 - Max

Answer 5

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

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

还有一个方便的速查表可用。

- andiF

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

步骤二：CSS 代码。

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

说明： 值e5cc是您在下一个链接和图像中看到的尖角标记的代码。

https://fonts.google.com/icons?selected=Material+Icons&icon.query=chevron

如何获取 Chevron 图标的内容代码

- Juan Pablo Risso

Answer 7

您可以在rtl模式下使用此功能：

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

- Imad Ghoummaid