微信小程序中使用iconfont作为图标库
说明
在小程序项目目录中，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。下载到本地的 iconfont 字体库文件（.ttf、.woff、.woff2）就不在白名单中，因此，微信小程序在本地时图标可以正常显示，上传后却不会显示。解决方案有以下两种：①直接使用阿里巴巴的网络路径；②将字体库文件转为base64格式。
小程序上传后缀名白名单参见：
https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html#%E5%85%81%E8%AE%B8%E4%B8%8A%E4%BC%A0%E7%9A%84%E6%96%87%E4%BB%B6
下载图标库
阿里巴巴矢量字体库地址: http://www.iconfont.cn/
- 选择需要的字体添加到购物车。
- 在购物车内，下载代码。
- 解压文件
将字体库文件转换为base64格式
在 transfonter.org 将字体库文件转化成base64格式。
上传：找到TTF格式文件，上传到平台（Add fonts）
设置：打开Base64编码（Base64 encode），选择下载的格式（Formats）
转换（Convert）并下载（Download）压缩包
小程序中引入图标库
- 解压后将 stylesheet.css 中的 Base64 编码替换到图标库 iconfont.css 文件的url中。
- 将 iconfont.css 文件复制到项目中，后缀改为 .wxss 在app.wxss中用@import全局引入
@import "./common/iconfont.wxss";
- 编写代码，上传后测试
微信小程序中使用iconfont作为图标库相关推荐
- 在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...
- 微信小程序中怎么使用阿里图标库中的图标
我们知道,微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的,所以,以前我们可能会在css中使用阿里图标库,但是在微信小程序中使用阿里图标库,要做一些处理 阿里图标库(不会使用的底下留言 ...
- 微信小程序如何使用iconfont阿里巴巴图标库？
步骤: 1.如图先下载: 2.找到iconfont.css改为iconfont.css 3.修改iconfont.wxss文件的内容,如图复制内容至其文件 4.替换到文件页面当中 5.去页面中引入i ...
- 微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
- 在微信小程序中使用iconfont
微信小程序上使用iconfont的方法 一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他 一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 ...
- 在小程序中使用阿里巴巴矢量图标库
在百度小程序或者其他小程序中使用阿里巴巴矢量图标库是为了提高小程序渲染加载,因为小程序文档内都不建议把所有的图片和图标文件放在小程序端,在小程序中使用阿里巴巴矢量图标库的字体图标,首先要在这个网站挑选 ...
- 微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份 进行了网站维护,维护之后,不能"生成在 ...
- 如何在微信小程序中使用iconfont
开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
- 微信小程序中使用iconfont图标
方案一: 利用小程序中不支持 ttf 字体,却支持 base64 的特点,我们可以通过将 ttf 字体转码成 base64 ,再通过 iconfont 的特点,通过设置字体大小和颜色来达到目的. 具体 ...
- 微信小程序中使用icon font图标
前言: 有时候我们在开发的时候,特别是使用特定的框架开发时,比如使用vue.ionic.angular等框架开发时:框架带有的特定的图标有限而且很少!都知道 icon font上的图标资源非常丰富. ...
最新文章
- Vista下的五笔输入法
- 【thymeleaf】Access to request parameters is forbidden in this context
- java ee cdi_Java EE CDI依赖关系消歧示例
- axios vue 回调函数_前端Vue 面试题大全
- 用python画渐变的圆_Python成像库(PIL)绘图 – 带渐变的圆角矩形
- Jmail 发送邮件错误
- 使用 Navicat Premium12 创建报表
- 数学建模系列--模糊综合评价
- AutoJs学习-音量键控制脚本运行
- 基于stm32单片机的按键智能电子密码锁（源码+仿真+原理图+PCB+参考论文）
- 物体重心的特点是什么_确定物体重心位置的常用方法是什么呢？
- Java: Unresolved compilation problem的解决方法
- 接口加密（TokenSpringCloud项目中进行token认证）
- 红帽rhce考试自带补考吗_【重要通知】红帽 RHCE7.0 版本考试即将下线
- Matlab画三维图笔记
- 工信部怒了，App 厂商们又作死
- c语言上机试题8,计算机考试二级C语言上机试题上[8]
- 率先断供华为，Google现在后悔了
- css 径向渐变实现渐变小圈
- Vue移动端----页面旋转进入特效功能实现