vue中使用iconfont
Vue Iconfont 使用
2023-09-14 08:57:24 时间
第一步: 进入官网,注册--登录
第二步: 图标管理---我的项目--创建项目---新建
![](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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- 解决vue+element 时间控件时间差,区域时差8小时
- html使用vue axios,使用 Vue和axios
- 你知道import Vue from 'vue' 吗?
- vue上传文件到Minio
- vue文件中引入js_vue中require引入js
- vue实现简单的分页功能
- 私活神器!!SpringBoot+Vue企业级支付系统!附源码!
- vue组件通信6种方式总结(常问知识点)1
- vue.js客服系统实时聊天项目开发(五)flex布局实现输入框区域
- 理解 Vue 生命周期钩子
- vue .passive的作用详解编程语言
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- Vue结合Redis实现性能优化(vue引入redis)
- 使用Vue从Redis获取数据(vue去redis取数据)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue搭配Redis做针对性取值(vue redis取值)