码迷,mamicode.com
首页 > 其他好文 > 详细

vue中使用iconfont

时间:2020-06-29 09:30:16      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:mat   alt   jpeg   tps   number   新建   pre   follow   ring   

第一步: 进入官网,注册--登录

阿里巴巴矢量库

第二步: 图标管理---我的项目--创建项目---新建

 
技术图片
新建项目

第三步: 进入图标库--官方图标库

 
技术图片
开始选择图标

第四步:选中图标-- 添加入库-- 添加至项目---选择刚刚创建的项目--确定

下面举例我们选择了两个图标

 
技术图片
购物车中的图标
 
技术图片
添加至项目

第五步: 下载至本地---- 点击下载至本地按钮

 
技术图片
下载至本地
 
或者直接点击下载代码也可以。
技术图片

 

 

 

第六步: 解压下载的压缩文件----整理放入vue中的static中(在static中新建文件夹 icon ),同时直接把iconfont.css放入static中

 
技术图片
放入static的icon里面

 
技术图片
注意要修改地址

 
技术图片
5个URL要修改加./icon/

第七步: vue的main.js中引入 *注意必须: npm install css-loader -s 否则报错

import "../static/iconfont.css"

第八步: 使用iconfont

<span class="icon iconfont">&#xe6a1;</span>

不同的图标 只是span的内容不一样,class名称一样。



作者:冬天的_太阳
链接:https://www.jianshu.com/p/fa6ce8e6b011
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

vue中使用iconfont

标签:mat   alt   jpeg   tps   number   新建   pre   follow   ring   

原文地址:https://www.cnblogs.com/51net/p/13206004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!