问题
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:
.bullet li a:before {
content: "";
}
回答1:
Update on 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.
Link to codepoints in GitHub repository: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
Step 1: Include the Material Icons Stylesheet.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Step 2 :
CSS Code:
.bullet li a:before {
font-family: "Material Icons";
content: "\e5cc";
}
Explanation: The value e5cc
is the code which you see for the chevron.
回答2:
::before {
font-family: 'Material Icons';
content: "\E87C";
}
::after {
font-family: 'Material Icons';
content: "face";
}
http://codepen.io/estelle/pen/MwvOjd
回答3:
Try this.
.bullet li a:before {
font-family: FontAwesome;
content: "\f054";
}
You can refer here for content values
回答4:
You can use this for rtl mode:
.bullet li a:before {content: '\E5CB';}
回答5:
If you already included the minified CSS from materialdesignicons.com then just use the Material Design Icons font family instead:
::after {
font-family: 'Material Design Icons';
content: "\f054";
}
There is also a convenient Cheat Sheet available.
来源:https://stackoverflow.com/questions/40194077/how-to-set-the-css-content-property-with-a-google-material-icon