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

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

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

前端必备之阿里巴巴矢量图标库iconFont字体图标的使用_第1张图片

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

前端必备之阿里巴巴矢量图标库iconFont字体图标的使用_第2张图片

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

 

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

前端必备之阿里巴巴矢量图标库iconFont字体图标的使用_第3张图片

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

你可能感兴趣的:(前端必备之阿里巴巴矢量图标库iconFont字体图标的使用)