iconfont的使用

首先你要有一个图标库的帐号，咱们使用的是阿里矢量图标库，其次你要有一套已经设计好的图标原图。若是你具有了这些，就能够和我一块儿看iconfont的使用姿式了。

写在前面

1. 不结合其余矢量库或UI框架一块儿使用的方法，能够参照官网的指示进行操做：http://iconfont.cn/plus/help/detail?helptype=code 也能够在稍后下载到本地的官方demo中学习如何使用。
2. 若是结合其余矢量库一块儿使用则有一些须要注意的问题和一些操做。咱们的项目是用的ant design，所以本文记录和ant design结合使用

使用方法：

1. 登陆帐号并找到个人项目

若是还没有本身的项目，点击添加项目

如何上传图标请参照官网进行操做，能够由设计师直接上传也能够由程序员上传。
http://iconfont.cn/plus/help/detail?helptype=about

要点说明：

新建项目时FontClass/Symbol前缀和Font Family字段的填写很重要，后面会讲解用途

2.将图标下载到本地

你会获得以下文件：

其中demo.css，demo_fontclass,demo_symbol,demo_unicode详细演示了三种的使用方法。

要点说明：

若是和ant design结合使用，这个前缀必定要写为anticon，由于在使用其图标写法时会自动给图标加上anticon前缀。以下图官网描述：

3. 整合进项目中

首先将下载的图标文件放进项目相应静态文件夹中。
咱们使用的是fontclass方式，所以，须要在整个项目的css中引入iconfont.css
而后想要拓展ant design的图标库就须要看一下它是如何使用的。最终我找到了两个关键的文件：/node_modules/antd/lib/style/core/iconfont.less,/node_modules/antd/lib/style／mixins/iconfont.less,当看到第一个文件和我们下载下来的iconfont.css文件如此类似，真是放心了一大半。
最后在另外一个能覆盖掉自带样式的文件中添加以下代码

这样能够告诉系统先用anticon_user（还记得这个是新建项目时定义的字体名称吧）字体，没有的话再用anticon（ant design定义的）字体

注意：ant design的图标都是\e600多，以下图，所以你本身的图标的Unicode(16进制)定义的时候必定不要和原始的重复，不然会产生没必要要的麻烦。