icon-font 图标字体的使用

icon-font 图标字体的使用，

方法一：可以在icomoon下载相应的图表字体，官网为：https://icomoon.io/  

进去会提供600+的免费图表，如果想要更多的图表字体可选择Icon Library；如图所示：

选择好需要的图标后点击右下角的Generate Font生成图标，生成后download下来，下载好的文件会包含fonts文件夹和css文件、demo.html文件，把fonts文件夹和css文件引入到项目中，css文件需要根据项目路径做相应的字体路径更改，然后在你要显示的地方直接定义好你要用的图标的类名即可，css中的伪类不动。

下面贴代码：

方法二：在阿里巴巴矢量图标库获取图标，地址：http://www.iconfont.cn/plus/home/index

同样的查找到你需要的图标，然后添加到你自定义的项目中，再下载至本地，下载好的文件如图：

把四种字体文件和iconfont.css引入到项目中，如果不考虑项目大小和直接拷贝整个文件夹，附图：

此时在你要用到图标字体的地方有两种方式引入图标字体，一种为用该图标的类名；如：<i class="iconfont icon-74"></i>

另一种为用该图标的16进制码；如：<i class="iconfont">&#xe602;</i> <i class="iconfont">&#xe63a;</i>

注意iconfont类不管哪种方法都不能去掉。

关于如何上传图标字体可参考：http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/