微信小程序使用阿里巴巴图标库(外链式)

由于小程序的前端代码大小最大只有2M,无疑逼着我们按照小程序的规范,把尽可能的图片都放在远程服务器上,即使用网络图片而非本地图片(本地图片的大小会算在打包程序大小内)。一般的数据图片还好,不用说我们都会放在服务器上,但是对于一些图标就比较头疼了,尤其是一些没有ui而是自己寻找图片当图标的程序员们,图标不合规范就算了,大小还很大,这里有个不错的图标库而且还免费,那就是阿里巴巴图标库了。地址在这里:https://www.iconfont.cn/home/index

接下来废话不多说,看看怎么用

一  登录并创建我的项目

登录不用多说,三种方式,估计一般人只有新浪账号,好一点的有github账号,第三种就流弊了,随便选一个进入。

然后选择上方的 “图标管理” -> “我的项目”

这里你会发现你的项目是空的,不要急,点击右侧的右边文件夹创建项目,然后填写内容,内容随便了,都无关紧要

二  选择图标添加至项目

这接下来就看你需要什么样的图标了,然后选择添加入库

然后点击右上角的购物车图标,选择添加至项目

扫描二维码关注公众号,回复: 16282098 查看本文章

然后你就发现你的项目里就有你刚刚添加的图标了,请忽略其他我以前添加过的图标

三  下载图标样式文件并放入到微信小程序

下载解压后,把其中的iconfont.css文件放入到你的小程序项目里,并把.css后缀名改成.wxss

但是到目前位置还是引入本地的资源,所以选择外链方式怎么做呢,接着往下看

四  复制在线链接代码修改iconfont.wxss

回到项目管理中,点击unicode,并复制代码

然后覆盖刚刚拷贝到小程序里的iconfont.wxss文件里,替换@font-face的内容

即这里换成你刚刚复制的代码

四  引入样式并在控件里使用

在你这个页面的wxss中引入,比如你是a.wxml中使用,那么就在a.wxss中第一行加入这个代码,引入

然后在a.wxml页面文件中就可以这样使用了

其中iconfont是固定前缀,后面的shanchu即是你iconfont.wxss底下的具体哪个图标的代码

至此就结束了,后面如果再添加图标,依旧到项目管理里,里面会提示你点击更新代码,继续按照上面的步骤即可

此外注意:

如果要修改图标的大小和颜色,可以自定义个选择器,大小用font-size,颜色用color即可

本人个人原创,如有雷同,纯属巧合,或者与本人联系,做改动。请转载或者CV组合标明出处,谢谢!(如有疑问或错误欢迎指出,本人QQ:752231513)

猜你喜欢

转载自blog.csdn.net/qq_30548105/article/details/107294285