微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)
前提
需要安装好 nodejs (略)
用于下载插件
安装插件
npm install mini-program-iconfont-cli --save-dev
初始化配置文件
npx iconfont-init
会生成一个 inconfont.json 文件
填入给你的 Symbol 链接
生成小程序组件
npx iconfont-wechat
使用图标
在 app.json 文件里设置使用图标组件
"usingComponents": {
"iconfont": "/iconfont/iconfont"
}
在 wxml 中使用
<iconfont name="dog"></iconfont>
如图:
更改图标大小
在 iconfont.wxml
中可以随意修改,每次找有点麻烦
也不建议你去修改 iconfont.js
里的 svgSize
的大小
可以修改 iconfont.json
里 default_icon_size
的值
然后更新一下 iconfont-wechat
就可以设置图标全局的大小了
npx iconfont-wechat
项目更新图标
当你的项目图标更新了,需要更新你的 Symbol 链接,然后在 iconfont.json 里修改参数 symbol_url
然后更新一下 iconfont-wechat
就可以了
npx iconfont-wechat
The_End
微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)的更多相关文章
- 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
- 微信小程序怎么用?线下商家最适合玩小程序
随着微信小程序不断地释放新功能,许多行业越来越关注小程序,目前已经有不少餐饮和线下传统零售企业开始谋划利用好小程序.但是,线下商业有着复杂的场景,如何针对自己行业的特点和需求开发出属于自己的小程序,是 ...
- 微信小程序外包 就找北京动软 专业承接微信小程序定制
很多人问为什么要开发微信小程序,微信小程序的“入口”在哪儿? 1.只有访问过的小程序,才会出现所谓的「入口」. 所有访问过得小程序都可以从微信首屏下面的「发现」点过去.(必须是最新版微信) 这个所谓的 ...
- 今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
- 微信公众号开发之H5页面跳转到指定的小程序
前言: 最近公司有一个这样的需要,需要从我们在现有的公众号H5页面中加一个跳转到第三方小程序的按钮.之前只知道小程序之间是可以相互跳转的,今天查阅了下微信开发文档原来现在H5网页也支持小程序之间的跳转 ...
- .NET生成小程序码,并合自定义背景图生成推广小程序二维码
前言: 对于小程序大家可能都非常熟悉了,随着小程序的不断普及越来越多的公司都开始推广使用起来了.今天接到一个需求就是生成小程序码,并且于运营给的推广图片合并在一起做成一张漂亮美观的推广二维码,扫码这种 ...
- 如何临时发布部署Cocos小游戏到Linux服务器,让别人能在微信打开
两个星期前,我们发布了第一个小游戏教程: 教程:制作一个小游戏送给喜欢的TA(不会编程也能学会哦) 上周有好几位小伙伴在b站催更,呃,作为小透明,收到催更信息后还是很激动的!竟然有同学在看我们的小教程 ...
- 【转】小波与小波包、小波包分解与信号重构、小波包能量特征提取 暨 小波包分解后实现按频率大小分布重新排列(Matlab 程序详解)
转:https://blog.csdn.net/cqfdcw/article/details/84995904 小波与小波包.小波包分解与信号重构.小波包能量特征提取 (Matlab 程序详解) ...
- 微信团队分享:Kotlin渐被认可,Android版微信的技术尝鲜之旅
本文由微信开发团队工程是由“oneliang”原创发表于WeMobileDev公众号,内容稍有改动. 1.引言 Kotlin 是一个用于现代多平台应用的静态编程语言,由 JetBrains 开发( ...
- 图标集锦:10套免费的社交媒体 & 社交网站图标
社交网络是最近几年互联网领域最热门的关键词之一,如今社会网络化媒体也成为我们信息获取和传播的重要途径,很多网站都有把内容分享到社交媒体的功能. 社交媒体图标作为向用户传递信息的重要媒介,不管是在网页还 ...
随机推荐
- 一周精彩内容分享(第 1 期):"世纪逼空大战"
这里记录过去一周,我看到的值得分享的东西. 一方面是整理记录一下自己一周的学习,另一方面也是期待自己有更多的输出,有更多的价值. 周刊开源(Github:wmyskxz/weekly),欢迎提交 is ...
- getline()的使用注意
在使用getline读入一整行时,若是前面是使用getchar().cin这类读入了一个字母,但是不会读入后续换行\n符号或者空格的输入时,再接getline()就容易出现问题. 这是因为输入数字之后 ...
- [CF套题] CF-1163
CF-1163 传送门 # Penalty A B1 B2 C1 C2 D E F 3 (483) 464 +0 0:06 +1 01:13 +3 01:12 + 01:57 + 01:56 A 第一 ...
- Codeforces Round #672 (Div. 2) D. Rescue Nibel!(排序)
题目链接:https://codeforces.com/contest/1420/problem/D 前言 之前写过这场比赛的题解,不过感觉这一题还可以再单独拿出来好好捋一下思路. 题意 给出 $n$ ...
- 2020牛客暑期多校训练营(第八场)Game SET
传送门:Game SET 题意 一套牌有四种属性,每种属性都有三种特征,shapes (one, two, or three), shape (diamond, squiggle, or oval), ...
- Educational Codeforces Round 91 (Rated for Div. 2) C. Create The Teams
题目链接:https://codeforces.com/contest/1380/problem/C 题意 给 $n$ 个数分组,要求每组的最小值乘以该组数的个数不小于 $x$ . 题解 从大到小依次 ...
- 高斯消元初步(Gauss算法)
Gauss算法,称为高斯消元算法,用来解决n元一次方程,在解决线性方程问题起着重要作用. 简述 运用高斯消元的方法,我们可以在O(n3)的时间求出n元线性方程,但是由于时间复杂度的原因,请注意题目数据 ...
- Codeforces Round #552 (Div. 3) C. Gourmet Cat (数学,模拟)
题意:你要带着你的喵咪一起去旅行,你的喵在星期\(1,4,7\)吃喵粮\(x\),在星期\(2,6\)吃喵粮\(y\),在星期\(3,5\)吃喵粮\(z\),你只有\(a\)个\(x\),\(b\)个 ...
- Linux系统编程【1】——编写more命令
背景介绍 笔者知识背景 笔者接触Linux快一年了.理论知识方面:学习了操作系统基础知识,了解进程调度.内存分配.文件管理.磁盘I/O这些基本的概念. 实操方面:会使用Linux简单命令,在嵌入式系统 ...
- python自动化运维之CMDB篇-大米哥
python自动化运维之CMDB篇 视频地址:复制这段内容后打开百度网盘手机App,操作更方便哦 链接:https://pan.baidu.com/s/1Oj_sglTi2P1CMjfMkYKwCQ ...