---

目的：實現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：543985125@qq.com

總結

以上是生活随笔為你收集整理的QML 导入ttf图标库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。