vue中使用iconfont
第一步: 进入官网,注册--登录
第二步: 图标管理---我的项目--创建项目---新建
![](http://upload-images.jianshu.io/upload_images/6421933-a6c68e10a6817c2f.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1090/format/webp)
新建项目
第三步: 进入图标库--官方图标库
![](http://upload-images.jianshu.io/upload_images/6421933-bf5b2d9776ef6bb3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
开始选择图标
第四步:选中图标-- 添加入库-- 添加至项目---选择刚刚创建的项目--确定
下面举例我们选择了两个图标
![](http://upload-images.jianshu.io/upload_images/6421933-cef745dd73069167.png?imageMogr2/auto-orient/strip|imageView2/2/w/467/format/webp)
购物车中的图标
![](http://upload-images.jianshu.io/upload_images/6421933-593275737e94ed63.png?imageMogr2/auto-orient/strip|imageView2/2/w/479/format/webp)
添加至项目
第五步: 下载至本地---- 点击下载至本地按钮
![](http://upload-images.jianshu.io/upload_images/6421933-464aa399609c708f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
下载至本地
或者直接点击下载代码也可以。
![](https://img2020.cnblogs.com/blog/338465/202006/338465-20200629082751016-2113289901.png)
第六步: 解压下载的压缩文件----整理放入vue中的static中(在static中新建文件夹 icon ),同时直接把iconfont.css放入static中
![](http://upload-images.jianshu.io/upload_images/6421933-314b927e7b25a9a0.png?imageMogr2/auto-orient/strip|imageView2/2/w/624/format/webp)
放入static的icon里面
![](http://upload-images.jianshu.io/upload_images/6421933-96998b62f42d396d.png?imageMogr2/auto-orient/strip|imageView2/2/w/223/format/webp)
注意要修改地址
![](http://upload-images.jianshu.io/upload_images/6421933-7b3353b885931a56.png?imageMogr2/auto-orient/strip|imageView2/2/w/681/format/webp)
5个URL要修改加./icon/
第七步: vue的main.js中引入 *注意必须: npm install css-loader -s 否则报错
import "../static/iconfont.css"
第八步: 使用iconfont
<span class="icon iconfont"></span>
不同的图标 只是span的内容不一样,class名称一样。
作者:冬天的_太阳
链接:https://www.jianshu.com/p/fa6ce8e6b011
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
作者:阿笨
【官方QQ一群:跟着阿笨一起玩NET(已满)】:422315558
【官方QQ二群:跟着阿笨一起玩C#(已满)】:574187616
【官方QQ三群:跟着阿笨一起玩ASP.NET(已满)】:967920586
【官方QQ四群:Asp.Net Core跨平台技术开发(可加入)】:829227829
【官方QQ五群:.NET Core跨平台开发技术(可加入)】:647639415
【网易云课堂】:https://study.163.com/provider/2544628/index.htm?share=2&shareId=2544628
【腾讯课堂】:https://abennet.ke.qq.com
【51CTO学院】:https://edu.51cto.com/sd/66c64
【微信公众号】:微信搜索:跟着阿笨一起玩NET