嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

Icons

1、说明

1.1、示例:http://m.ydui.org/html/icons.html

1.2、webapp开发时常用的字体图标;各图标大小均已调整为同等大小;

1.3、阿里妈妈iconfont地址:http://www.iconfont.cn/collections/show/766

2、使用

2.1、图标均采用伪类:before添加,在标签上添加对应class[.icon-名称]即可;名称为示例包含的名字,例如:

<div>
<i class="icon-home-crt"></i>
<i class="icon-home"></i>
<i class="icon-shopcart-crt"></i>
<i class="icon-shopcart"></i>
<i class="icon-ucenter-crt"></i>
<i class="icon-ucenter"></i>
</div>

2.2、更改图标大小和颜色

<style>
.icon-home:before,
.icon-home-crt:before {
font-size: 30px;
}

.icon-home:before {
color: #333;
}

.icon-home-crt:before {
color: #C00;
}
</style>
<div>
<i class="icon-home"></i>
<i class="icon-home-crt"></i>
</div>

2.3、注意

2.3.1、样式名[class^="icon-"]:before, [class*=" icon-"]:before已默认引入字体图标,其他样式命名时需注意。

3、参与讨论

3.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。