uni-app引入字体图标库以及关于原生页面顶部按钮图标的设置

将iconfont.css文件导入,

去掉:

  src: url('iconfont.eot?t=1582357420622'); /* IE9 */
  src: url('iconfont.eot?t=1582357420622#iefix') format('embedded-opentype'), /* IE6-IE8 */
,
  url('iconfont.woff?t=1582357420622') format('woff'),
  url('iconfont.ttf?t=1582357420622') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1582357420622#iconfont') format('svg'); /* iOS 4.1- */

修改为:

@font-face {font-family: "iconfont";
  src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASgAAsAAAAACSQAAARUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqFTIRKATYCJAMUCwwABCAFhG0HRxvNB8gehXHDfaAJk8Xk/qIkn/rN988uEL0u1OyKK1KxyJI4KaFPxDzJE/OvzsBD/u1d/xYlEHhAbRHX1lpAAbe2JNFUviRQA/7C+/ufY6Zr3sDyr9IxKrTbNhvQ3gQHFJEYCTrdieMtw2td6oL2AwG41NiMTGMzEhx4ZBgBkC0U8MARs+BLCIRDb8uZmyAXBI7mVPoGgLPdvycfmsIBUEIBGbswj/oxUGl1lmMs7LRtOKE/FwB2EcABNgN4IGuux4/zI5txXHIqrwPg0DtR+J6rtur8LYyjsrW4HFz4Hx5AUBweSAuiycLYgSgP31OTAwS+59RIa22gBmidILspGsHWuXqKfQCQnrNWIZ0ogid07hoefayntHwlOfy209b74V6IevuxWyXJRQI5fK5QdLjLf0Gq1U1TqVI3d/nNxe6Lbyyn7kymhHM/bIUOz6ZZMJEG0r7e4RddXppJKzddVJlOSzfcVJI+TbrgBpvhA/nSC1Z/QLzwkqIPUsgLGdSLbyxOZZAXt1Euurg0kzlEuWxdzCS7HcGby+VLV19QohSZHlAVvHpzeeNE9TRkSDeoykUl1ZylyuUga1RZfCHkZ/UNFYp94a5/GvLq8775Rl5sb8edd5L6G7NTH4TDp5wxPr7tu+92HYxVwzHaG9+V5G1tm50V0ueJS29qBWqelrc1X3tzSqjetiYw25I7xGPVfczLJMV4+aWXO160VFbkLPS+kSdWXN40tPnUhdKWP/aSxUOkuTLb6qsahy8y2l7V8v9C2aEyWaSfcd55m09rHriD3NE0XHfqctnXt+cS5VBZrkzxR/PYhTDPPOOf75YrD9/KyTmXvSeXNpzefM3+rlv2H/LMBefuIGt1+EZ2Quctkvr8hedsx5pd+jy9q+O6g4Pz5aPHjrYe99PA8jEt4wMHrpP3tbYtlWu3zXguaBYGJ1rfGzXBnaSk6DM5SXJOHFWHzy4Wcu8qVU7+coaRI0u0S+5DAgBYlme40do6Iil3DGCRoOcTAIH0iXOePbk9/zncF8v/8UEH7gCTVX1UvvSlS2Xp32FKlCD+UChyYhVSioFn7WqSfIKz762Pws8g/ysSQIHP+9EWjyKxfQ7FIVB21cBxWI3ksZtB4NYCNg794LLJ+GK3QgYOSSeAjU5EQOS5G6gcTwMnz5tIHvsZCEr8BjZ5wYGLEoVruq2NkGvYYB6T+UXvoWLIp8c1w266vPwlFtgf9RhRuUtUmJEM+cXGuoZkfJzFmdHHhORBgSbT1ETN0GPiGDqMRaO6mDD0MPOZdUHTTHTV12t5d6rz6TG4DDMwHibGT+R1KFGIjy5Os5ubXKnfL2EC9ovyMEqqyuIKxpAUal3UqE5DDeS4Jl6r6lw6Jx0koInJpFGDNAZdjGgMXExUj+hEifxeYYyPqU6wRSihSz2up9XV1I2vi11j6fdZk9xICEo4whOB2MDPuhHjg3qMCabHG2X2ZCy5Jc4OBgA=') format('woff2');
}

引入即可

关于原生页面顶部按钮图标的设置的配置
 

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"app-plus": {
					"titleNView": {
						"searchInput": {
							"placeholder":"搜索帖子",
							"placeholderColor":"#6d6c67",
							"backgroundColor":"#f5f4f2",
							"borderRadius":"4px",
							"disabled":true,
							"align":"right"
						},
						"buttons":[
							{
								"color":"#333333",
								"colorPressed":"#bbbbb",
								"float":"right",
								"fontSize":"16px",
								"fontSrc":"/static/iconfont.ttf",
								"text":"\ue603"
							}
						]
					}
				}
			}
		}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值