Vue项目引入阿里巴巴矢量图标库
添加图标并下载一、点击图标管理–>我的项目,创建项目简单点~填个项目名即可二、选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是项目有很多图标,需要后续管理,还是要创建项目),然后回到第一步中的我的项目,点击下载至本地在vue项目中使用一、引入项目解压缩下载好的项目,复制到项目中(我的目录是src/asset...
·
添加图标并下载
一、点击图标管理–>我的项目,创建项目
简单点~填个项目名即可
二、选择一个图标,加入购物车
点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是项目有很多图标,需要后续管理,还是要创建项目),然后回到第一步中的我的项目,点击下载至本地
在vue项目中使用
一、引入项目
解压缩下载好的项目,复制到项目中(我的目录是src/assets/iconfont
,删除demo开头的文件)
二、在main.js引入
...
import Vue from "vue";
import App from "./App.vue";
import "./assets/iconfont/iconfont.css"; //引入阿里巴巴矢量图标库
...
三、代码中使用
iconfont.css
//icon名称在下载的文件夹中的iconfont.css中
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-denglu:before { content: "\e611"; }
使用
<i class="iconfont icon-denglu"></i>
更多推荐
已为社区贡献6条内容
所有评论(0)