在QML前端界面中,加入fontello图标

一、 说明
在QT的QML文件中,因考虑到各个设备的具体限制,icon的显示形式,建议用字符来替代。这里说明通过fontello的字体,来替代相关的icon。

二、 选取fontello中的字体
选取字体,并下载
网址:http://www.fontello.com/
( 这里查找并三行和空心左箭头,详见,查看字体编码部分)
选取字体,并下载
图1
点击下载文件

三、 查看字体编码
在这里插入图片描述
注意最左边的编码,一个是F0C9,另一个是E800

四、 将字体文件放入QT Quick项目
此项目,在QT creator中,创建新项目,Application=>Qt Quick Application - Stack

  1. 在项目根目录下,建立文件夹fonts,将下载解压缩后得到的文件fontello.ttf,放入到文件夹中。

  2. 将文件加入项目
    在项目中,右键点击加入新的文件
    在这里插入图片描述

  3. 加入文件
    在这里插入图片描述
    点击打开即可

  4. 项目目录如下
    可看到增加的字体文件
    在这里插入图片描述
    五、 修改原文件,将字体显示

5.	ToolButton {  
6.	            id: toolButton  
7.	             // 字体文件加载
8.	            FontLoader {id:fontello;source:"fonts/fontello.ttf"} 
9.				// 设定字体的family 
10.	            font.family: "fontello"  
11.	  
12.	            font.pixelSize: Qt.application.font.pixelSize * 1.6  
13.	  
14.	            // 显示字体
15.				// 详见 三 查看字体编码, 选择字体的编码
16.	            text: stackView.depth > 1 ? "\uE800":"\uF0C9"  
17.	             
18.	            onClicked: {  
19.	                if (stackView.depth > 1) {  
20.	                    stackView.pop()  
21.	                } else {  
22.	                    drawer.open()  
23.	                }  
24.	            }  
25.	        }

六、 显示效果
在这里插入图片描述
参见课程:《QT QML跨平台移动APP编程》

发布了2 篇原创文章 · 获赞 7 · 访问量 162

猜你喜欢

转载自blog.csdn.net/jamescat/article/details/104490685
今日推荐