1、在你需要使用到iconfont的时候,是先找图标库,一般使用的图标库是---阿里巴巴矢量图标库。网址:http://www.iconfont.cn/;
2、进入网址后,点击图标库,可以分类查找也可以直接搜索你想要的图标(例如:搜索‘支付宝’),把该图标加入购物车;
3、点击“购物车---下载代码---需要登录(GitHub登录,微博登录,或者阿里内部员工登录)”;
4、下载到本地的是一个压缩包,解压缩到本地;
5、有三个浏览器网页示例,demo_unicode.html,demo_symbol.html,demo_fontclass.html,一般用的都是demo_unicode.html示例;
----------------------------------------真正开始使用了--------------------------------------
6、在你的项目根目录下新建一个文件夹-------iconfont文件夹,把你解压缩里面的iconfont.css,iconfont.eot,iconfont.ttf,iconfont.woff四个文件复制到iconfont文件夹里;
7、调用方法:<spanclass="iconfont">3</span>;
8、iconfont和文本一样,可以改变font-size,font-weight,color等等;
注意:class名一定要写,且都是class="iconfont",不同的图标,只是unicode编码不同而已。
示例代码:
<ul class="lists">
<li class="active"><i class="iconfont">㑃</i>用户</li>
<li><i class="iconfont"></i>信息展示</li>
<li><i class="iconfont"></i>消息组管理</li>
<li><i class="iconfont"></i>支付策略</li>
<li><i class="iconfont"></i>促销信息管理</li>
</ul>