vue和小程序项目中使用iconfont的方法


Posted in Javascript onMay 19, 2020

一、vue中使用iconfont

1、百度搜索iconfont或者阿里巴巴矢量图标库官网,注册登录;

2、找到图标管理->新建项目,或者使用已有的项目,用于保存自己的图标;

vue和小程序项目中使用iconfont的方法

3、搜索自己需要的icon;

vue和小程序项目中使用iconfont的方法

4、添加到购物车中;

vue和小程序项目中使用iconfont的方法

5、购物车中就有了相应icon

vue和小程序项目中使用iconfont的方法

6、点击购物车,选择添加至项目。就是我们刚才创建的项目或者之前已有的项目

vue和小程序项目中使用iconfont的方法

7、点击确定,即可将icon添加到我们的项目中

vue和小程序项目中使用iconfont的方法

8、然后点击我的项目,找到自己的项目,即可看到刚才添加的icon

vue和小程序项目中使用iconfont的方法

9、点击下载至本地

vue和小程序项目中使用iconfont的方法

10、将下载的压缩包进行解压

vue和小程序项目中使用iconfont的方法

11、打开解压好的文件夹,找到iconfont.css

vue和小程序项目中使用iconfont的方法

12、把解压好的文件夹放入项目目录下,在vue项目中的index.html中引入即可使用

如可以放在public文件夹下

vue和小程序项目中使用iconfont的方法
vue和小程序项目中使用iconfont的方法

13、在组件中使用

vue和小程序项目中使用iconfont的方法

总结:

三步搞定

1、将iconfont下载至本地
2、在项目中引入文件
3、vue中直接使用,然后使用i标签,通过类来规定使用的icon
4、小程序中把iconfont.css的后缀名改为wxss,在项目中直接使用i标签即可

到此这篇关于vue和小程序项目中使用iconfont的方法的文章就介绍到这了,更多相关vue小程序使用iconfont内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS模拟多线程
Feb 07 Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 Javascript
Javascript的promise,async和await的区别详解
Mar 24 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 #Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 #jQuery
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 #Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 #Javascript
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
通过js随机函数Math.random实现乱序
May 19 #Javascript
You might like
用PHP发电子邮件
2006/10/09 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php实现websocket实时消息推送
2018/03/30 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
学习vue.js计算属性
2016/12/03 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
对angular4子路由&辅助路由详解
2018/10/09 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
详解React 条件渲染
2020/07/08 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
python自动zip压缩目录的方法
2015/06/28 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
linux面试题参考答案(9)
2016/01/29 面试题
总经理任命书范本
2014/06/05 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android