VUE添加阿里巴巴矢量图标

一.项目完成前
使用在线自动更新图标的方法
在阿里巴巴矢量图标库中新建项目-添加好自己想要的图标-并复制这一段代码到vue 中的 index.html


image.png
<link rel="stylesheet" href="//at.alicdn.com/t/font_2272875_8jd9fw8qha.css">

即可。
使用时:
<i class="iconfont iconuser"></i>
iconuser就是图标名字

image.png

可以随时刷新新增的图标和修改的图标

二、项目完成时
下载项目的所有图标:


image.png

所有文件放在vue项目中assets/(起个名字)下

然后在main.js下引入该文件:
import './assets/iconfont/iconfont.css'

使用时:
<i class="iconfont iconuser"></i>
iconuser就是图标名字


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容