iconfont的查寻和使用

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">&#x33;</span>;

8、iconfont和文本一样，可以改变font-size,font-weight,color等等;

 

 

注意：class名一定要写，且都是class="iconfont",不同的图标，只是unicode编码不同而已。

 

示例代码：

<ul class="lists">
 <li class="active"><i class="iconfont">&#x3443;</i>用户</li>
 <li><i class="iconfont">&#xe610;</i>信息展示</li>
 <li><i class="iconfont">&#xe621;</i>消息组管理</li>
 <li><i class="iconfont">&#xe614;</i>支付策略</li>
 <li><i class="iconfont">&#xe6a2;</i>促销信息管理</li>
</ul>