在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源
Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法
一、下载图标
首先挑选图标,添加入库

然后添加至项目

然后在“我的项目”中,将资源文件下载到本地

建议设置为 font class
二、在项目中引入资源
在小程序项目中建一个 iconfont.wxss

在下载的资源文件中有一个 iconfont.css,复制文件中所有代码,粘贴到 iconfont.wxss 中
然后在 app.wxss 中引入
/**app.wxss**/
@import 'styles/iconfont.wxss';
这时 font-face 中引入的资源文件还是本地路径

三、将资源路径改为外链
在“我的项目”中,将图标格式设为 Unicode,然后“查看在线链接”

复制生成的代码

粘贴到 iconfont.wxss 中,替换掉原本的 font-face
保存之后即可正常使用


在微信小程序中引入 Iconfont 阿里巴巴图标库的更多相关文章
- 微信小程序如何使用iconfont阿里巴巴图标库?
步骤: 1.如图先下载: 2.找到iconfont.css改为iconfont.css 3.修改iconfont.wxss文件的内容,如图复制内容至其文件 4.替换到文件页面当中 5.去页面中引入i ...
- 微信小程序中使用阿里字体图标
在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...
- 如何在微信小程序中使用iconfont
开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
- 如何在微信小程序中使用阿里字体图标
第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 ---> 点击“添加入库” ...
- 微信小程序中使用阿里ICON图标
由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过 https://transfonte ...
- 微信小程序中使用iconfont/font-awesome等自定义字体图标
小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...
- 小程序中引入iconfont
注释:本人喜欢 font class, 你们可以依葫芦画瓢unicode和 symbol,,下面是 font class 演示: 1.选择好图标,然后: font class 2.步骤二: 复制 ...
- 如何在微信小程序中国引入fontawesome字体图标
fontawesome官网地址:http://fontawesome.dashgame.com/ 一. 二. 下载之后的字体图标 找到 文件中的如下图.ttf文件 三. 在https://transf ...
- 在微信小程序中使用redux
本文主要讲述,在微信小程序中如何使用redux DEMO 需要解决的问题 如何在小程序中引入redux状态管理库,及它相关的插件? 微信小程序没有清晰的异步api,便于thunkMiddleware处 ...
随机推荐
- 序列化 pickle shelve json configparser
模块pickle(皮考) dumps(当破死)序列化. 把对象转化成bytes loads(楼死) 反序列化. 吧bytes转化成对象 dic = {"jay": "周杰 ...
- [HTML] css3 输入框input类型为number时,去掉上下箭头方式
<input type="number" ...> <style> input::-webkit-outer-spin-button, input::-we ...
- 【sping揭秘】8、容器内部事件发布(一)
容器内部事件发布 Spring的applicationContext容器提供的容器内事件发布功能,是通过java提供的自定义事件实现的 事件类型:eventObject 类继承 事件监听:eventL ...
- vmworkstation安装unbuntu server 网络配置:NAT模式
之前安装虚拟机测试环境的时候,习惯了使用桥接模式或者仅主机模式:今天偶然发现,其实NAT 模式的网络配置还是挺方便的. 在新建虚拟机的时候,选择网络模式为NAT,虚拟机创建完成之后,在vmworkst ...
- 前端代码质量保障之代码review
经验丰富的程序员和一般程序员之间的最大区别,不仅体现在解决问题的能力上, 还体现在日常代码的风格上.掌握一门技术可能需要几月,甚至几周就够了. 好的习惯风格养成却需数年. 团队成员之间需要合作,代码需 ...
- (转) JVM Crash with SIGSEGV - problematic frame - libzip.so
原文:https://stackoverflow.com/questions/38057362/jvm-crash-with-sigsegv-problematic-frame-libzip-so h ...
- numpy基本使用2
#-*- coding:utf-8 -*- import numpy as np ''' numpy:底层由c语言实现,所以速度较快. ''' #1.numpy常用函数 l1=np.array([1, ...
- Dubbo--002--例子程序
虽然项目中用到了dubbo,还是想自己玩玩写个demo.百度一搜,关于dubbo的helloworld基本都是在windows上做的.现在在Linux上玩一下. 环境准备: jdk版本:1.7 服务器 ...
- 分步理解 Promise 的实现
一个 Promise 的运用: var firstPromise = new Promise(function(resolve,reject){ setTimeout(function(){ var ...
- screen 实战后台命令执行备份
一.安装 [root@vmware ~]# yum install -y screen 二.直接在命令行键入 screen 命令 [root@vmware ~]# screen 三.暂时终端会话 那么 ...