在微信小程序中引入 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 ...
- 微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份 进行了网站维护,维护之后,不能"生成在 ...
- 微信小程序中怎么使用阿里图标库中的图标
我们知道,微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的,所以,以前我们可能会在css中使用阿里图标库,但是在微信小程序中使用阿里图标库,要做一些处理 阿里图标库(不会使用的底下留言 ...
- 微信小程序中使用iconfont阿里巴巴矢量图标
1.首先去https://www.iconfont.cn中选择项目需要的图片,并且加入到购物车. 2.在购物车中将图标---添加至项目 3.选择Unicode -----查看在线链接 4.复制代码,下 ...
- 微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
- 微信小程序中引入ttf字体
微信小程序中引入ttf字体 解决常规引入ttf不生效问题 第一步:将ttf字体转为base64(转码网址:https://transfonter.org) 第二步:在static文件夹下新增font文 ...
- 在微信小程序中使用iconfont
微信小程序上使用iconfont的方法 一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他 一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 ...
- 如何在微信小程序中使用iconfont
开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
- 微信小程序中使用iconfont图标
方案一: 利用小程序中不支持 ttf 字体,却支持 base64 的特点,我们可以通过将 ttf 字体转码成 base64 ,再通过 iconfont 的特点,通过设置字体大小和颜色来达到目的. 具体 ...
最新文章
- 在时间关系数据上AutoML:一个新的前沿
- 被coding.net坑了, Git 动态Pages要停掉...
- mybait 转换失败 null处理
- 10.14 ssh:安全地远程登录主机
- java replaceall正则表达式_正则表达式的规则及应用
- Concept3D推出交互式3D地图平台
- Web笔记-移动前端开发笔记
- layer:好看的弹出窗口
- 网狐大厅介绍页js脚本错误
- STM32 实现光敏传感器
- 服务器上运行程序提示*工作已停止,已停止工作 出现了一个问题,导致程序停止正常工作。请关闭该程序...
- 闲聊互联网经济的现代化
- 处理器中的流水线技术
- Python Selenium爬虫实现歌曲免费下载
- linux挂载4tb硬盘分区,centos7挂载新加4T硬盘到home
- 广州蝶梦网络科技有限公司的互联网意义
- 安装最新的文泉驿字体[z]
- 医院HIS系统与LIS系统源码
- JS方法-Elem.addEventListener(‘transitionend‘,function(){},false)
- 微信小程序实现wxml中数据保留小数或取整