第一种方式在线使用icongont矢量图

打开阿里矢量图网站选择需要的图标

在这里插入图片描述

点击 点此复制代码 将此代码放到一个指定的css文件中

注意点:在线使用矢量图一定记住加上“ https: ”
在这里插入图片描述

然后在APP.vue引入CSS文件

注意scoped属性一定不要写,scoped是为了避免其他页面样式命名重复的问题,所以一旦加上该属性,就会导致矢量图无法显示
在这里插入图片描述

第二种方式本地使用iconfont矢量图

下载矢量图资料包并解压

在这里插入图片描述

将文件需要的文件放到自己制定的文件下

在这里插入图片描述
选择文件后需要在iconfont.css中使用~@进行绝对路径匹配
在这里插入图片描述

在APP.vue文件中引入

在这里插入图片描述

使用

在这里插入图片描述

完美展现

在这里插入图片描述
阿里矢量图官网

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐