前端必备之阿里巴巴矢量图标库iconFont字体图标的使用

作为一个前端人，相信大家在写前端页面的时候肯定会用到很多图标，这些图标可以是UI妹子提供的图片，但是把图片直接插入页面并不能做到灵活变动图标的大小和颜色，今天就让我来展示一下如何灵活使用阿里巴巴矢量图标库中的图标

一、打开百度输入网址进入阿里巴巴矢量图标库https://www.iconfont.cn

二、搜索你需要的图标，比如搜索头像

可以看到很多图标，选择其中你喜欢的图标，加入购物车，点开右上角的购物车图标，就可以看到添加至购物车中的图标，点击下载代码

 

打开压缩包中的css文件可以看到

将里面的内容复制粘贴到你项目的css文件中，引用此css文件就可以根据class名使用此图标啦

<i class="iconfont icon-icon-test"></i>