小白如何在html css里使用字体图标~

之前写过用户手册，所以借平台练习一下写作，哦吼吼~

字体图标经常使用的是

阿里图标库的：http://www.iconfont.cn/

icomoon图标库的：https://icomoon.io/

下面就介绍一下icomoon库的字体图标使用方法~~~=。=~~~

【最终效果】

【第一步】：

打开链接进入icomoon图标库（https://icomoon.io/）

单击右上角的这个按钮，进入图标选择界面

【第二步】：

点选你需要的图标，类似加入购物车啦

下面的Selectionxxx（选中xx个）会清点你选了多少个图标。然后单击进入你的已选图标界面,单击设置图标旁边的preferences（偏好设置）， 选择支持ie8,ie7&1e6，单击右下角 下载即可。

【第三步】：

解压下载的字体图标包，拷贝ie7和font两个文件夹到你的站点里面去。

大概是这个样子的:

【第四步】：

拷贝下载的字体图标包里面的文件style.css里面的内容到你的css页面

大概是这个样子的：

然后重新修改@font-face里面的链接，和【重要】删掉这个东西“?m3vgb7”，比如

修改前：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?m3vgb7');
  src:  url('fonts/icomoon.eot?m3vgb7#iefix') format('embedded-opentype')

改为内部链接：

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot');
  src:  url('../fonts/icomoon.eot#iefix') format('embedded-opentype')

最后：

就可以最新所欲的用下载到的字体图标啦！！！

直接<i class="icon-名称"></i>就可以用了哦！！！

例如：

                                <a href="#"><span>108</span><i class="icon-cloud-upload"></i>已发布</a>
<a href="#"><span>10</span><i class="icon-archive"></i>草稿箱</a>
<a href="#"><i class="icon-loader"></i>申请中</a>
<a href="#"><span>90</span><i class="icon-square-check"></i>已通过</a>
<a href="#"><span>1</span><i class="icon-square-cross"></i>被驳回</a>

BTW：css定义一下<i>标签里面的字体的大小属性（font-size=20px 2.0rem）就可以改变图标的大小哦！！！