首页分享 QML 导入ttf图标库

QML 导入ttf图标库

来源：花匠小妙招时间：2025-05-13 17:37

目的：实现Qt导入矢量字体图标库，并在QML中进行调用显示

话不多说，给你看看效果图
这里写图片描述

注意：这个音乐符号并不是图片，是文字，有兴趣的请看后文，用不到的请关闭本页面

步骤一：下载你喜欢的图标字体库
这里我推荐以下两个网站，很多图标是免费的，可以自行下载。
阿里图标库
FontAwesome
下面的实验中，我采用的是FontAwesome里面的一个图标库，有需要自己去下载吧，it‘s free。

步骤二：查看字体库文件
查看字体库文件首先推荐以下这个IcoMoon，这个网站的作用就是查看你的ttf文件中有那些具体的图标或者文字。
1、将你步骤一下载好的字体库进行解压，然后你会得到一个文件目录，如下
**字体库结构**
备注： css文件夹里面font-awesome.css能够查看当前字体库的名字，如我的是： font-family: 'FontAwesome’
fonts文件夹里面包含了字体库的每一种格式，我们主要使用的是svg矢量格式，和ttf标准字体库格式，这两个文件的作用是，svg可以在网页上查看对应字体的编码，ttf可以方便的导入项目，通过字体的编码进行引用。

2、在IcoMoon这个网站上导入刚刚你下载的svg矢量库

备注：图中数字序号代表操作顺序，导入的是fonts文件夹下的svg文件

导入成功后会在这个页面多一个你字体库名字的选项，如下：
这里写图片描述

3、查看你需要的图片的编码
展开刚刚导入的字体库，然后选择一个图标，点击右下角的Generate Font，如下
这里写图片描述
然后就是这个界面了，这里面的 f072 就代表着是这个图标对应的编码，记住，等会儿就会使用到

步骤三：导入Qt工程，引用字体库
具体的ttf文件导入就和普通的资源文件导入一样，此处不过多赘述。
1、首先在main.cpp 中添加字体库资源文件，代码如下：

#include <QGuiApplication> #include <QQmlApplicationEngine> // 引入字体库头文件 #include <QFontDatabase> int main(int argc, char *argv[]) { QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication app(argc, argv); // 添加Material风格图标 QFontDatabase::addApplicationFont(QLatin1String(":/font/fontawesome-webfont.ttf")); QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); if (engine.rootObjects().isEmpty()) return -1; return app.exec(); }

123456789101112131415161718192021

2、在需要使用到字体库的地方进行编码引用即可，代码如下：

TabButton { font.family: "FontAwesome" text: "uf072" } 1234

备注：font.family: “FontAwesome” text: “uf072” 这两句代码就是前面两步做的准备工作

3、最后就可以直接运行了，效果如下：
这里写图片描述