uni-app 使用中导入导航栏的字体图标

注意 : 导入的只能放入 放入static文件目录下面

在这里插入图片描述

  • 这里的字体图标使用的是IconFont阿里巴巴矢量图标库
  • 将文件下载好之后 拿出iconfont.ttf文件
    在这里插入图片描述
  • 放入static文件目录下面 放入static文件目录下面 放入static文件目录下面
    在这里插入图片描述
  • pages.json中配置
    • uni-app的详细配置
    • fontSrc图片的地址 只能是本地的地址
    • text按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头,如 "\ue123"(注意不能写成"\e123")。
"pages": [
	{
		"path": "pages/index/index",
		"style": {
			"app-plus": {
				"titleNView" : {
					"backgroundColor": "#FFFFFF",
					"searchInput": {
						"borderRadius": "4px",
						"placeholder": "请输入内容",
						"backgroundColor": "#F7F7F7",
						"disabled": true
					},
					"buttons": [
						{
							"color": "#f0e798",
							"float": "left",
							"fontSize": "26px",
							"fontSrc": "/static/iconfont/iconfont.ttf",
							"text": "\ue63c"
						},
						{
							"color": "#000000",
							"float": "right",
							"fontSize": "26px",
							"fontSrc": "/static/iconfont/iconfont.ttf",
							"text": "\ue666"
						}
					]
				}
			}
		}
	}
],
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐