Iconfont图标使用-打造自己项目下…

    现在很流行的前台模板采用的一般是bootstrap，font awesome(图标字体)，经常会遇见的问题是缺少定制版的图标，其中有很多原因，一部分是由于fontawesome是外国的图标方式，上面的情况经常会遇见。今天项目刚好也遇到了这个问题，经过调研， Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。最好的是支持全文检索功能，根据自己的业务查找到对应的很多业务相关图片，很多符合国内网站的图片标准。如下图

步骤：

    1.把自己项目中用到的图片根据相关关键字检索出来(如 卡片，报表)，然后选择加入类似于购物车里面。如图：

  2.项目中的图片添加完以后点击下载到本地，相应的压缩包（名字如ux_1471330450_817315）。压缩包里面的文件有iconfont.css，iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff以及demo.css,demo.html。所以的图标都可以根据demo参考使用。文件结构如下图

  

  3.把这个文件夹放入你对应的项目静态资源存放的地方，然后在对应的文件中加载iconfont.css这一个文件就可以。接下来就跟demo使用一样的方式，你轻松copy使用久可以。

注：如果要更改图标的大小，有很多种方式。第一种,修改iconfont.css中的.iconfont属性如(color:#777,font-size:20px;);第二种,定义一个新的的cssclass类，里面定义font-size大小、color等等属性，然后把这个定义的class在自己想要对应的图标元素中加载。其他的方式，在这里就不说了

附加图标库链接：  http://iconfont.cn/