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 相关文章推荐
javascript遍历控件实例详细解析
Jan 10 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
JavaScript中的相等操作符使用详解
Dec 21 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
JavaScript中的其他对象
2008/01/16 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python中捕获键盘的方式详解
2019/03/28 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python实现批量文件重命名
2019/10/31 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
python 装饰器重要在哪
2021/02/14 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
初二政治教学反思
2014/01/12 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
名人传读书笔记
2015/06/26 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
创业计划书之废品回收
2019/09/26 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL