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

2、在需要使用到字體庫的地方進行編碼引用即可，代碼如下：

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

備註：font.family: “FontAwesome” text: “\uf072” 這兩句代碼就是前面兩步做的準備工作

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

結果就把我最開始的音樂替換成爲了飛機。
寫在最後：有問題留言或者E-mail：[email protected]