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

南笙酒味 提交于 2019-12-18 12:23:11

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!