作为一个前端如何使用iconfont

作为一个前端在网站开发过程中，图标这个东西是必不可少的，有些项目中会有ui设计，他们会给你提供对应的psd，你可以从psd中获取想要的图标.png，这个过程真的比较繁琐而且还不是很方便，比如说某个菜单中对应有图标，但是是菜单就必然会有hover事件，这时你如果是用icon.png图片的方式来做的话至少一个图标就得有两个不同颜色的图标很是麻烦，之前就听说过阿里巴巴矢量图标库，一直没去深究，一直在使用以前的老一套方法依靠ui的png图,但是在最近的一个项目需要我去模仿别人的网站来做一个自己的网站，发现人家用的都是iconfont，我压根就没办法获取到对应的png图片，就不得不去研究iconfont，结果发现贼好用的。下面就是我最近研究的iconfont的结果，在这里做下记录。

直接使用阿里巴巴图标矢量库，简单使用，自定义自己想要的图标字体。

1,在iconfont注册登录后，将你的网站可能会用到的图标在图标库中找到并收藏到自己项目中，然后在项目中下载到本地，如图：

 

 

 

 

 

 

 

 

2，下载下来的zip中的文件内容如图所示：

 

将图中有用的信息提取到自己的项目中如下图所示：

 

这些都做好后就是在自己的页面直接引用就OK了，如图：

 

这样页面就会直接显示你想要的字体了。

自认为觉得很好用，既简单又实用，在这里记录下。