QML 导入ttf图标库

---

目的：实现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 
#include 
// 引入字体库头文件
#include 

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();
}

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

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

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

3、最后就可以直接运行了，效果如下：

结果就把我最开始的音乐替换成为了飞机。
写在最后：有问题留言或者E-mail：[email protected]