图标字体IcoMoon 使用

IcoMoon 使用
官方地址 http://icomoon.io/
实际上,它是一种字体,只不过这种字体的字象图标一样,比如windows中自带的MT Extra Webdings Wingdings字体。
使用的方法就是引入CSS即可
我们需要在IcoMoon App中定制他们,网站可以为你生成图标的CSS。

进入到IcoMoon App中,选中你需要的图标,然后点击底部的font
便会显示使用该"文字"对应的编码
在顶端的Prefences中勾选Encode & Embed Font in CSS 和 Use Class Selector
PS 如果不选择Use Class Selector的话 必须使用span标签
之后点击底部的Download

如何使用它?
引入下载的style.css
<link rel="stylesheet" href="style.css">


<span class="icon icon-file"></span>
<span class="icon icon-music"></span>
<span class="icon icon-play"></span>
<span class="icon icon-cart"></span>

即可

icon样式中使用的是font-family 表明他们实际上是字体, 因此可以用font-size来改变大小

posted @ 2014-07-25 16:50  cart55free99  阅读(523)  评论(0编辑  收藏  举报