微信小程序使用彩色图标(阿里巴巴矢量图标库)(炒鸡详细)
前言废话
本来一直都是用的阿里巴巴矢量图标库中的单色图标,那样就简单,把素材代码文件下载一下,再复制到项目文件里就行了。可是前几天突然有个需求是用彩蛇图标当用户的头像,我以为按照原来的操作可行,结果原来可可爱爱的图标变成了一个黑色圆点。这可愁死我了,于是马上问度娘,原来是要下载插件,最后顺利的完成了需求。现在有空了就来整理一下操作顺序,希望能帮到像我几天前那样的小伙伴。
配置环境变量
如果已经安装过nodejs的小伙伴自动跳过
第一步,下载安装nodejs
1、下载
我的电脑是windows10 64位的
官网下载地址
2、安装
自己设置安装路径
这一步也直接next
打完√直接next
点击下载
完成安装
这个是自动弹出的,关了就行
3、新建插件安装位置
在安装的文件夹里新建node_cache和node_global,如果有了就不用新建了。
打开cmd命令窗口,输入 npm config set prefix "D:\nodejs\node_global"运行,然后再输入npm config set cache "D:\nodejs\node_cache"运行
4、环境变量配置
打开此电脑的属性
进入环境变量
设置系统变量,选择新建一个
设置用户变量
5、点击windows+R键输入node -v和npm -v查看安装好的版本
到这里我们的环境就配好了,可以去下载插件了。
安装插件
在项目的根目录打开命令窗口
输入npm install mini-program-iconfont-cli --save-dev
如下图所示就是OK了
生成配置文件
输入npx iconfont-init
这时候我们可以看到项目的根目录里出现了一个inconfont.json文件
symbol_url 复制图标官网给你的项目的Symbol链接
trim_icon_prefix,图标前缀省略,我们可以设置为“icon-”
生成小程序组件
图标的使用
在app.json文件里设置全局图标组件
"usingComponents":{"iconfont":"/iconfont/iconfont"},
<iconfont name="youzi-"></iconfont>
小图标就可以出来了
更改图标尺寸
更新项目图标
当你的项目图标更新了,你只需要更新你的Symbol链接,然后在iconfont.json里修改参数symbol_url,然后再执行一次
npx iconfont-wechat
听说看完点赞、评论、收藏的小伙伴都拿到了大公司的offer了呢
微信小程序使用彩色图标(阿里巴巴矢量图标库)(炒鸡详细)相关推荐
- 微信小程序中使用iconfont阿里巴巴矢量图标
1.首先去https://www.iconfont.cn中选择项目需要的图片,并且加入到购物车. 2.在购物车中将图标---添加至项目 3.选择Unicode -----查看在线链接 4.复制代码,下 ...
- 微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
- 微信小程序 - 引入并使用 Fly.js 请求库(超级详细的教程及运行示例)提供 Fly.js 源码源文件下载,贴心的配置示例及注释,优雅快速的发起 http 网络请求
前言 咱们在开发微信小程序时,市面上常见的 Axios 请求库无法使用,但好在 Fly.js(官网) 提供了解决方案. 网上大部分教程杂乱无章,本文将从 0 - 1 详细讲解整个引入请求库过程, 实现 ...
- 微信小程序自定义组件使用阿里矢量图标库图标
有时候我们有这一种需求:在使用组件的时候,希望能传入自己写的class样式. 测试了一番,直接传递class参数是无效的,那我们怎么做呢? 开始实践 仔细查阅了官方文档,发现是可以的. 我们首先在组件 ...
- 微信小程序:实现可拖动悬浮图标(包括按钮角标的实现)
微信小程序:实现可拖动悬浮图标 在制作商城类微信小程序的过程中,我们经常会碰到需要增加可拖动悬浮图标的情况,本文简单的介绍一下可拖动悬浮按钮的实现. 运行截图: 主要代码: js: var start ...
- 微信小程序—页面内分享按钮用图标代替
微信小程序-页面内分享按钮用图标代替 前言 代码 效果图 前言 张小龙不知道出于什么原因将打开客服会话.触发用户转发.打开授权设置页.打开"意见反馈"页面等功能全都挂载到butto ...
- 微信小程序如何添加新的icon图标
微信小程序如何添加新的icon图标 第一步 先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个 压缩包,解压压缩包里面有一个css的文件 ...
- 校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程
校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程 完整代码下载地址:校园二手书商城源代码基于微信小程序云开发 欢迎使用,下面是配置教程 长话短说,下面直接说配置流程 一.小程序 ...
- 在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...
- 微信小程序 使用高德地图实现标点 图标修改
微信小程序 引入高德地图 高德地图开放平台 根据入门指南完成前五步后 建议在app.js中引入 amap-wx.js 并初始化 高德地图 app.json // 引入路径 根据自己文件所在位置引入 v ...
最新文章
- 文字图片垂直居中对齐
- android 分段显示百分比,按百分比设置排名-Android DisplayMetrics
- roast和roasting区别_《吐槽大会》的英文居然是roast!为什么?
- Windows基础题目
- 03 | SRE切入点:选择SLI,设定SLO
- python二维码生成器制作中报错为oserror_Python生成:OSError:[WinError 193]%1不是有效的Win32应用程序...
- linux-查找文件夹
- 算法:求两个数最大公约数
- 解决listview addheader EditText焦点问题
- web.xml 详细介绍
- 剑指Offer面试题:28.连续子数组的最大和
- Java删除文件和文件夹的方式
- ibm服务器刷主板系统,ibm bios 升级图解 ibm服务器进入bios/升级程序
- Android控件介绍及用法
- java 箭头符号_箭头符号大全
- 整站SEO优化方案:整站优化的方案的流行格式
- 唯品会关键字搜索商品API接口(item_search-按关键字搜索唯品会商品API接口),唯品会API接口
- 如何在没有 Mac 的情况下使用 Flutter 和 Codemagic 构建和分发 iOS 应用
- 我的世界1.13 mod制作——制作一个Item(二)
- 财政部将加强金融企业财务管理