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

时间:2024-03-15 21:27:00

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

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

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

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

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

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

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

 

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

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

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

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

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