使用iconfont阿里巴巴矢量图标库(最方便的使用方法)

使用iconfont阿里巴巴矢量图标库(最方便的使用方法)

https://www.iconfont.cn/阿里巴巴矢量图标库
看着挺多的,仔细看内容并不多。图文并茂哦!
第一步:登陆后。喜欢哪个放到购物车
使用iconfont阿里巴巴矢量图标库(最方便的使用方法)_第1张图片
第二步:下载代码。会下载到一个压缩包
使用iconfont阿里巴巴矢量图标库(最方便的使用方法)_第2张图片

使用iconfont阿里巴巴矢量图标库(最方便的使用方法)_第3张图片
下载解压出来
使用iconfont阿里巴巴矢量图标库(最方便的使用方法)_第4张图片
把下载后解压的的font_y8f10rhuo28文件扔到code编辑器里,在需要字体图标的html文件中引入iconfont.css就行。只引入这一个css文件就好! 其他的可以删除了。
使用iconfont阿里巴巴矢量图标库(最方便的使用方法)_第5张图片
使用iconfont阿里巴巴矢量图标库(最方便的使用方法)_第6张图片

效果就是这样滴!
使用iconfont阿里巴巴矢量图标库(最方便的使用方法)_第7张图片

补充:使用iconfont阿里巴巴矢量图标库(最方便的使用方法)_第8张图片
红线后面的文件都是我加入购物车中的那些图标,只是文件的格式不同,为了兼容不同的浏览器

你可能感兴趣的:(前端,web前端)