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：543985125@qq.com

QML 导入ttf图标库相关推荐

阿里巴巴图标库下载和使用，以及怎么在uni-app中导入使用图标库
目录一.==下载阿里巴巴矢量图文件== ==(1)阿里巴巴矢量图页面== ==(2)打开图标库== ==(3)添加到库中== ==(4)添加至项目== ==(5)项目设置== 随后保存成功之后生成代 ...
iOS使用字体图图标库(ttf)无效问题
检查以下几点 1.是否导入字体图标库文件 info.plist文件中是否配置资源是否加入到工程中 2.检查使用字体图表库时的name是否为字体库的名称代码中使用 [UIFont fontWithN ...
Qt字体图标库fontawesome和pixeden使用示例
文章目录图标库下载代码实现天气图标阵列显示图标库下载 pixeden官网:pixeden fontawesome官网:Font Awesome pixeden图标类型会多一些, 而且是分类的, ...
在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
QML学习十九：ttf字体库使用
若该文为原创文章,转载请注明原文出处一.前言在使用QML时,常常自定义按钮,按钮上有显示个图标,其实,那不是图标,是文本,如何显示? 本篇记录,如何导入阿里巴巴字体库,并调用显示. 二.阿里巴巴字 ...
2017 阿里巴巴矢量图标库导入所选图标到jsp页面步骤
阿里巴巴矢量图标库导入所选图标到jsp页面步骤,给新手看的,自己也是第一次使用,希望对其他人有帮助,因为看到网站很多博客,都说的不是很清楚,避免有人走弯路. 1.需要注册一个github账号: 登陆 ...
Android引用ttf图标字体库
转载请注明出处:http://blog.csdn.net/yyh352091626/article/details/53113677 作为一个Android开发者,自己想做一个app练手,有个比较头疼 ...
非常实用，Android引用ttf图标字体库
转载请注明出处:http://blog.csdn.net/yyh352091626/article/details/53113677 作为一个Android开发者,自己想做一个app练手,有个比较头疼 ...
Android 如何应用ttf图标字体库
转载请注明出处:http://blog.csdn.net/yyh352091626/article/details/53113677 作为一个Android开发者,自己想做一个app练手,有个比较头疼 ...

QML 导入ttf图标库

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

QML 导入ttf图标库相关推荐

最新文章

热门文章