vue 使用 iconfont-阿里巴巴矢量图标库

方法一

1.找到需要的图标,点击添加入库

iconfont-阿里巴巴矢量图标库:https://www.iconfont.cn/home/index

vue 使用 iconfont-阿里巴巴矢量图标库_第1张图片

2.点击购物车,添加至项目

有项目的直接添加到已有项目,没有的新建项目即可

vue 使用 iconfont-阿里巴巴矢量图标库_第2张图片

3.使用 Font class 的方式,查看在线链接

vue 使用 iconfont-阿里巴巴矢量图标库_第3张图片

4.复制链接并打开

vue 使用 iconfont-阿里巴巴矢量图标库_第4张图片

5.在 vue 项目中,src 目录下新建 style 文件夹,新建 iconfont.css 文件,并把上一步打开的代码全部复制到 iconfont.css 文件中

vue 使用 iconfont-阿里巴巴矢量图标库_第5张图片

6.在 main.js 中引入样式文件

vue 使用 iconfont-阿里巴巴矢量图标库_第6张图片

7.在组件中使用

<div class="iconfont icon-kulian">必须添加 iconfont 类名div>

第二个类名为所使用的图标对应的类名
vue 使用 iconfont-阿里巴巴矢量图标库_第7张图片

方法二

1.找需要的图标,与上操作相同

2.点击购物车,下载代码

vue 使用 iconfont-阿里巴巴矢量图标库_第8张图片

3.在 vue 项目中,src 目录下的 assets 文件夹中新建 iconfont 文件夹,将下载好的文件复制到 iconfont 文件夹中

vue 使用 iconfont-阿里巴巴矢量图标库_第9张图片

4.在 main.js 中引入样式文件

vue 使用 iconfont-阿里巴巴矢量图标库_第10张图片

5.在组件中使用(与上相同)

<div class="iconfont icon-kulian">必须添加 iconfont 类名div>

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