字体图标的使用方法 ——icon-fonts
第一步：选择所需的字体图标，权威字体图标网站链接：https://icomoon.io点击打开链接
第二步：点击网站右上角处的红色按钮icnMoon App进行创建字体图标
第三步：我们可以直接选择已有的图标，具体使用不做过多解释，附教程链接http://blog.csdn.net/goodgirl1991/article/details/50416974点击打开链接
第四步：点击右上角紫色按钮import Icons导入自己本地的svg
重点来了！
第五步：如果本地的svg资源不够用怎么办？http://www.iconfont.cn点击打开链接
如上所示：点击svg下载，当然你也可以直接下载png格式，各种好处我也不多赘述
第六步：在网页中如何引用icomoon生成的fonts文件
注意：压解的icomoon文件中只需要fonts文件即可，可以在demo.html预览你加入的所有字体图标
第七步：附上字体图标使用方式
css中加入
@font-face{
font-family:'icomoon';src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight:normal;font-style:normal
}
[data-icon]:before{
font-family:'icomoon';content:attr(data-icon);
speak:none;font-weight:normal;
font-variant:normal;
text-transform:none;
line-height:1;
-webkit-font-smoothing:antialiased
}
html中加入
<span aria-hidden="true" class="icon-newspaper si_01" data-icon="ꀃ"></span>
或
<div aria-hidden="true" class="icon-newspaper si_01" data-icon="ꀃ"></div>
或者font、i、b等标签
通过css样式font-size属性控制字体图标的大小，color属性控制其颜色
只要可以用来操作字体的样式皆可以用在字体图标上
