如何使用材质设计标志性字体作为<li>元素的标记？

Question

是否可以使用http://zavoloklom.github.io/material-design-iconic-font/icons.html中的图标作为

元素的标记？

Answer 1

使用课程图标示例google icon

<i class="zmdi zmdi-google"></i>

之前你最常包含在HTML

中

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

Answer 2

使用：在带有Unicode的选择器之前的图标

li:before {    
font-family: 'Material-Design-Iconic-Font';
content: '\f34e';
margin:0 15px 0 -15px;
}

https://jsfiddle.net/Soufiane_Abid/8fwyfdyk/

或

<div class="list-group">
<a class="list-group-item" href="#"><i class="zmdi zmdi-home zmdi-hc-fw"> 
</i> Home</a>
<a class="list-group-item" href="#"><i class="zmdi zmdi-inbox zmdi-hc-fw">
</i> Inbox</a>
<a class="list-group-item" href="#"><i class="zmdi zmdi-star zmdi-hc-fw">
</i> Starred</a>
<a class="list-group-item" href="#"><i class="zmdi zmdi-email-open zmdi-hc-fw"></i> Drafts</a>
</div>