如何使用 Google Material Icon 设置 CSS 内容属性?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/40194077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the CSS content property with a Google Material Icon?
提问by Max
How can I insert the Google Material Icon "chevron icon right" (https://design.google.com/icons/#ic_chevron_right) in the following CSS content property:
如何在以下 CSS 内容属性中插入 Google Material Icon“chevron icon right”(https://design.google.com/icons/#ic_chevron_right):
.bullet li a:before {
content: "";
}
回答by Viswalinga Surya S
Update on 2018
2018 年更新
Google removed the codes which were displayed earlier for IE9 and below. To get the codes visit the codepoints file in the GitHub repository.
Google 删除了之前为 IE9 及更低版本显示的代码。要获取代码,请访问 GitHub 存储库中的代码点文件。
Link to codepoints in GitHub repository: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
GitHub 存储库中代码点的链接:https: //github.com/google/material-design-icons/blob/master/iconfont/codepoints
Step 1: Include the Material Icons Stylesheet.
第 1 步:包括 Material Icons 样式表。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Step 2 :
第2步 :
CSS Code:
CSS 代码:
.bullet li a:before {
font-family: "Material Icons";
content: "\e5cc";
}
Explanation: The value e5cc
is the code which you see for the chevron.
说明:该值e5cc
是您看到的 V 形代码。
回答by Daniel Eduardo Delgado Diaz
::before {
font-family: 'Material Icons';
content: "\E87C";
}
::after {
font-family: 'Material Icons';
content: "face";
}
回答by Bhavin Shah
Try this.
尝试这个。
.bullet li a:before {
font-family: FontAwesome;
content: "\f054";
}
You can refer here for content values
回答by Imad Ghoummaid
You can use this for rtl mode:
您可以将其用于 rtl 模式:
.bullet li a:before {content: '\E5CB';}
回答by andiF
If you already included the minified CSS from materialdesignicons.comthen just use the Material Design Icons font family instead:
如果您已经包含了来自materialdesignicons.com的缩小的 CSS,那么只需使用 Material Design Icons 字体系列:
::after {
font-family: 'Material Design Icons';
content: "\f054";
}
There is also a convenient Cheat Sheetavailable.
还有一个方便的备忘单。