好的应用需要好的图标来映衬。
使用图片做图标的弊端有:固定尺寸;激活样式需要做两套;占空间。
相对于图片图标,字体图标完美的解决了这些问题。
我们下面介绍小程序里引入图片的三种方式。
原生图标
小程序里原生图标是通过icon标签来引入的:
但是原生图标只有这么几个,面对前端妖娆繁杂的需求是捉襟见肘,远远不够用啊!
WeUI图标组件
WeUI 是一套同微信原生视觉体验一致的基础样式库,基于小程序自定义组件构建。
由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
要使用WeUI组件,我们需要到组件下载页面去下载icon组件:developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
下载完成后我们会得到一个icon文件夹。
里面有四个文件:icon.js, icon.json, icon.wxml,icon.wxss
我们在项目根目录下创建一个components文件夹,再将icon文件夹拷贝进去,然后在app.json中增加以下配置:
"usingComponents": {
"mp-icon": "components/icon/icon"},
在测试页面增加一段代码:
组件库里icon图标列表请参考这个链接:developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html。
目前一共有81个,这些图标对本人来说已经够用了。
但是对于很多特定行业比如旅游,外卖APP来说,图标定制化程度可能更高。
那么我们也需要让小程序有这样引入外部资源的能力。
iconfont图标
真不是说,阿里的这个图标库(www.iconfont.cn)真是给众多不会搞设计的程序员带来了莫大的福祉(马云:这词是我发明的)。
上面的图标种类繁多,你想要的都有,更多的还是你想不到的。
你需要做的就是把喜欢的图标加入购物车,然后分类作为一个项目下载下来:
解压下载下来的download.zip文件,将其中的iconfont.css文件拷贝到小程序utils目录下,重命名为iconfont.wxss,打开iconfont.wxss,将@font-face部分的一些url引用(红色框选部分)删除掉(看不清楚点击图片看大图哦):
打开app.wxss,在首行引入iconfont.wxss:
/**app.wxss**/@import './utils/iconfont.wxss';
在视图文件中,我们通过以下方式显示图标:
效果图:
以上。
推荐阅读:池州在线
-
娱乐新势力、互动再升级 高达中国计划发布 万
高达中国计划(简称GCP)正式发布。2021年,实物大自由高达立像将会震撼登场,这将会成为上海新的消费旅游地标,以及众多高达粉丝的圣地。在7月11日线上举行的G...
2020-07-13 -
秋刀鱼又硬又小为啥日本人那么爱它?哈尔滨网友
秋刀鱼又硬又小,为啥日本人那么爱它?了解原因:只怪我知识浅薄。秋刀鱼是日本的一种名菜,日本人最喜欢这种肉食。比起鱼子酱,更多的日本人喜欢吃秋刀鱼,当地人把这种鱼...
2020-02-12 -
一口电饭锅就能做的六道烤箱美食,快来学习一下
对普通的家庭来说,日常的各种吃食一般用不到烤箱,所以厨房也就一直没有配备烤箱,那么在这个时候如果自己想吃一些好吃的美食的话,除了去外面店买之外也没有其他得更好的...
2020-02-12 -
不要再买枣糕了,教你在家自己做,香甜可口,比
枣糕可以说是一种从小吃到大的甜食,从小就喜欢枣糕的味道,每次去超市或者蛋糕店的时候总是要买上几块吃。味道特别丰富,红枣的味道充斥在其中,香甜可口,特别诱人。现在...
2020-02-12 -
世界十大冰激凌排行榜 世界顶级冰激凌品牌
爱吃冰淇淋的你知道世界十大冰激凌排行榜是怎么样的吗?哈根达斯、COLD STONE、VIVOLI GELATO、COPPELIA、BERTHILION、Dair...
2020-02-12 -
四菜一汤,精美套餐
可乐鸡翅鸡翅中 8个可乐 半瓶葱 适量姜 2片生抽 适量料酒 适量冰糖 5粒老抽 少许盐 适量鸡精 适量1.把鸡翅洗净后背面划几刀,正面用牙签扎些小眼方便入味。...
2020-02-12 -
无法拒绝的温暖,甜蜜的中式甜品了解一下
现在的人一说到甜品,就会想到蛋糕、马卡龙、蛋挞还有各种派这样子的西式甜品,不得不说,在甜品这方面西方确实做得很好。但西式甜品的入侵,也导致了许多人对于我们传统的...
2020-02-12