iconfont字体图标库的使用方法——angular版本

在前端开发中，好的icon图标的引用常常是页面展示的点睛之笔，能让页面简单明了。图标往往比文字能更加清晰的阐述页面提供给用户的操作意图。目前笔者比较推荐的icon库有蚂蚁的AntD自带的图标库https://ng.ant.design/components/icon/zh，以及fontawesome（屌爆的字体）http://www.fontawesome.com.cn/faicons/。然而，我们却仍然会遇到找不到想要的图标这种情况，笔者就经常为寻找一个合适的图标发愁。本文向大家推荐一个非常不错的icon库——iconfont阿里巴巴矢量图库https://www.iconfont.cn/。

iconfont聚合了很多UI设计师的成果，其优点不仅在于汇聚了很多成熟的图标库，也在于提供了强大的搜索功能。能让前端开发人员快速找到想要的图标并下载到本地项目中。

以招商银行的logo为例，假设我在web前端开发中需要引入招商银行的logo，但又在AntD和fontawesome中没找到，我该怎么办呢？

1. 打开https://www.iconfont.cn/，使用微博或github登录在搜索框中搜索“招商银行”或cmb，出现以下结果

   

2. 假设我们需要的就是第一个结果，点击购物车添加入库，随后在右上角的购物车图标中就能看到增加了一个图标。点击购物车，点击下载代码，则会下载一个download.zip，解压该压缩包。

   

3.  打开解压后的文件夹，将iconfont开头的所有文件，放到angular项目的src/assets/iconfont目录下

   

4.  打开angular项目中的angular.json文件，在styles下加入"src/assets/iconfont/iconfont.css"，注意用逗号与上一个css文件分隔开。

   

5. 在html文件中（例如src/app/app.component.html），加入<i class="iconfont icon-cmb"></i>，使用ng s命令重新启动angular服务，项目打开后就能看到招商银行的logo啦！
6. 在此基础上，也可以继续对该图标进行一些css的修改，常见的比如调整color、尺寸等等。