微信小程序中使用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上的图标资源非常丰富. ...
最新文章
- 网络规划设计师学习攻略(2)
- 某8位微型计算机地址码为18位,2015广东海洋大学计算机组成原理试题
- python弹出框多一个空白框_Selenium+python3 应对多个弹出框存在(alert_is_present)判断和处理...
- php magento 开发,php – Magento：如何将配置更改从开发环境迁移到生产环境？
- 关于《Linux多线程服务端编程：使用muduo C++网络库》的内容梳理
- 怎么查电脑系统版本_台式机电脑系统雨林木风、深度技术、番茄花园、罗卜家园，哪个最稳定最好用？...
- KK音标和国际音标的对照
- 推荐系统论文阅读：Entire Space Multi-Task Model
- ThinkPHP5在线问答系统
- 水果店经营策略技巧汇总，第一次开一家水果店怎么经营
- 2003服务器开机无限重启,Windows2003 系统自动重启
- [英语阅读]保时捷与大众共商合并大计
- 微信小程序--优购商城项目（8）
- 关于PPP拨号的接入点
- MySQL数据库笔记——进阶篇
- BMZCTF WEB WEB_penetration
- Taurus_Linux
- 为什么很多中国知名企业要在开曼群岛注册？
- SpringSecurity（八）【RememberMe记住我】
- IFC格式BIM文件处理方案概述