当前位置: 首页 > article >正文

uniapp使用字体图标 ttf svg作为选项图标,还支持变色变图按

在staic目录下有一些ttf文件,如uni.ttf,iconfont.ttf 这些文件中保存这字体svg的源码们,我们也可以在网上找其他的。这些就是我们要显示的突图标的 显示来源。这样不用使用png图标,选中不选中还得用两个图片

我的具体使用如下

	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#007AFF",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		"iconfontSrc":"static/uni.ttf",
		"list": [{
				"pagePath": "pages/tabBar/component/component",
				"iconPath": "static/c1.png",
				"selectedIconPath": "static/c1.png",
				"text": "功能1",
				"iconfont": { // 优先级高于 iconPath,该属性依赖 tabbar 根节点的 iconfontSrc
				       			"text": "\ue534",
				        		"selectedText": "\ue230",
				        		"fontSize": "16px",
				        		"color": "#000000",
				        		"selectedColor": "#0000ff"
				      		}
			},

编码我是在page.json中随机找的,以后有好方法再记录

FontForge on Windows 一个软件

比如上面这个图标就填写上 "selectedText": "\ue8e5", 试验么问题

windows 查看ttf字体_如何查看ttf中字符-CSDN博客

 以下是选中效果和非选中效果的实际效果展示

 

下面是官网的解释


http://www.kler.cn/news/332228.html

相关文章:

  • TypeScript高级内容
  • 用Arduino单片机读取PCF8591模数转换器的模拟量并转化为数字输出
  • springboot实现沙箱支付退款
  • CTMO时代下的营销新力量:2+1链动模式AI智能名片商城小程序
  • Vue 中的路由:构建强大的单页应用导航
  • 【web安全】——命令执行漏洞/代码执行漏洞
  • 每日论文5—06TCAS2锁相环电流匹配的gain-boosting电荷泵
  • 图形化部署Java Web项目的3款工具大全
  • Redis中数据类型的使用(hash和list)
  • ubuntu定时执行posgreSQL备份脚本
  • Python基础语法1
  • LSM6DSV16X基于MLC智能笔动作识别(4)----中断获取智能笔状态
  • idea.vmoptions 最佳配置
  • windows环境下luarocks下载包的使用
  • 厂商资源分享网站
  • 数据特征工程:如何计算块熵?| 基于SQL实现
  • 深入挖掘C++中的特性之一 — 继承
  • Go基础学习11-测试工具gomock和monkey的使用
  • Python--导入模块报错处理
  • 2024年7月大众点评厦门美食店铺基础信息