【vue开发基础】之使用阿里巴巴矢量图标库

❤ 写在前面

如果觉得对你有帮助的话,点个小❤❤ 吧,你的支持是对我最大的鼓励~


第一步 准备工作

前往阿里巴巴矢量图边库,选择并下载你需要的图标

(1)加入购物车
【vue开发基础】之使用阿里巴巴矢量图标库_第1张图片
【vue开发基础】之使用阿里巴巴矢量图标库_第2张图片
(2)下载代码
【vue开发基础】之使用阿里巴巴矢量图标库_第3张图片
(3)解压并打开文件夹
【vue开发基础】之使用阿里巴巴矢量图标库_第4张图片
(4)打开demo_index.html,选择Font class这种方式引用
【vue开发基础】之使用阿里巴巴矢量图标库_第5张图片

第二步 导入到项目

(1)在assets文件夹下,新建一个文件夹,把iconfont.css 和iconfont.ttf文件导入进来
【vue开发基础】之使用阿里巴巴矢量图标库_第6张图片
(2)在main.js配置中 引入这个iconfont.css

import './assets/font/iconfont.css'

(3)更新图标库
按第一步进行操作,将iconfont.css 和iconfont.ttf文件替换即可完成

第三步 使用图标

【vue开发基础】之使用阿里巴巴矢量图标库_第7张图片

<span class="iconfont icon-shouye"></span>

到此就结束了,如果有什么不懂的,可以评论或私聊我喔

你可能感兴趣的:(CSS,前端,Vue,vue.js,前端,javascript)