阿里巴巴矢量图标库的使用

1、进入阿里巴巴图标库

官网:http://www.iconfont.cn/

阿里巴巴矢量图标库的使用_第1张图片

2、点击下面的我的项目,点进去之后进入项目

阿里巴巴矢量图标库的使用_第2张图片

3、点击右边的+号,添加项目

阿里巴巴矢量图标库的使用_第3张图片

4、按照里面的列表项填好,我们就建好自己的项目了

阿里巴巴矢量图标库的使用_第4张图片

在这里可以看到自己建好的项目Icon

阿里巴巴矢量图标库的使用_第5张图片

5、再次进入阿里巴巴图标首页,他有很多图标库种类,我们可根据需要进行选择合适的图标,选择好图标之后,选择购物车

阿里巴巴矢量图标库的使用_第6张图片

选择加入购物车之后,可看到右上角上面有“1”这个字样,证明加入购物车了(但并不代表这个图标已经进入我们的项目)

阿里巴巴矢量图标库的使用_第7张图片

6、加入购物车之后,点击右上角购物车,下面有个按钮“添加至项目”

阿里巴巴矢量图标库的使用_第8张图片

7、点击添加至项目,出现下面的项目选项,选择自己的项目(也就是刚才我们建立的Icon),点击确定即可。

阿里巴巴矢量图标库的使用_第9张图片

8、现在看到这个icon已经进入到我们的项目当中,点击上面的下载到本地

阿里巴巴矢量图标库的使用_第10张图片

9、我们在本地将整个包放进去,将CSS包引入到自己的html文件中,就可以成功使用阿里图标库啦

阿里巴巴矢量图标库的使用_第11张图片

你可能感兴趣的:(阿里巴巴矢量图标库的使用)