欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Qml使用FontAwesome图标字体库

程序员文章站 2024-02-18 16:23:46
...

Qml使用FontAwesome图标字体库

官网: http://fontawesome.io/
中文网: http://www.fontawesome.com.cn/
GitHub: https://github.com/FortAwesome/Font-Awesome

首先我们从官网或者GitHub上下载到最新的源码

在解压目录中找到 fonts\fontawesome-webfont.ttf 拷贝出来
这个是我们Qt程序使用FontAwesome图标字体库时需要加载的
然后在css目录下找到font-awesome.css这个是我们开发时需要对字体编码进行查找用的

在官网的 http://fontawesome.io/icons/ 页面可以查看所有的图标, 挑选我们需要的
使用时比如我们需要用这个心形的图标
Qml使用FontAwesome图标字体库

其名称为heart, 那么在font-awesome.css中我们通过查找就可以得到它对应的字体编码
Qml使用FontAwesome图标字体库

其字体编码为 f004
后面我们代码中会用到这个

也有更方便的方式: 官网直接查看字体编码 http://fontawesome.io/cheatsheet/

Qml工程中使用:

main.cpp

    // 添加字体文件
    int fontId = QFontDatabase::addApplicationFont(":/Font/fontawesome-webfont.ttf");
    QStringList fontFamilies = QFontDatabase::applicationFontFamilies(fontId);
    qDebug() << "fontFamilies.size() " << fontFamilies.size();

qml中:

        Text{
            color: "green"
            font.family: "FontAwesome"
            font.pixelSize: 30
            text: "\uf004"
        }

其中设置的本文字符QChar(0xf004) 就是我们刚才heart的字体编码f004

Qml使用FontAwesome图标字体库

需要完整代码请访问QtQuickExamples

相关标签: qml 字体