Qt6.5实战：学会使用字体图标，美化Qt程序UI界面

20YC编程

于 2024-03-11 18:00:00 发布

阅读量540

点赞数 9

分类专栏： Qt6.5实战文章标签： c++ Qt字体图标

本文链接：https://blog.csdn.net/yanghz/article/details/136118179

版权

Qt6.5实战专栏收录该内容

3 篇文章 0 订阅

订阅专栏

01 背景说明

Qt支持显示字体图标，学会使用字体图标，程序员可以在没有美工的情况下，开发出漂亮美观的UI界面。

字体图标功能对于初创公司，在项目开发初期，预算不多的时候，就可以零成本开发出图文并茂、风格一致、美观大方的UI界面程序。

以下列出其中一小部分字体图标截图，这么丰富的字体图标，看看都心动了吧！

Qt字体图标功能实现'灰..肥..肠'简单，下面就跟着(小二)一起来学习一下。

02 准备字体图标资源

网上搜索(字体图标)，下载一个字体图标资源文件，文末下载完整源码里面也有。

本示例使用的字体图标下载链接：Font Awesome，一套绝佳的图标字体库和CSS框架

下载文件名是(font-awesome-4.7.0.zip)，解压后取出以下二个文件：

fontawesome-webfont.ttf：字体图标资源文件，用来添加到Qt资源文件。

font-awesome.css：用普通文本编辑器打开，用来查询字体图标的唯一编码。

03 添加字体图标资源

将(fontawesome-webfont.ttf)文件复制到Qt工程(resource)目录下，并添加到resource.prc资源文件，如下图例子：

04 加载字体图标资源

#include <QFontDatabase>
#include <QFont>

// 默认字体对象
QFont m_fontIconFont;

// 加载字体图标资源
int i_font_id = QFontDatabase::addApplicationFont(":/resource/fontawesome-webfont.ttf");
QStringList font_families = QFontDatabase::applicationFontFamilies(i_font_id);
if (!font_families.empty())
{
    // 创建图标字体QFont对象
    m_fontIconFont = QFont(font_families.at(0));
    // 设置默认图标大小
    m_fontIconFont.setPixelSize(15);
}

05 显示字体图标

字体图标编码(0xfxxx)，可以通过字体图标官网，结合font-awesome.css文本来查找。

例如在官网上找到一个用户图标(fa-user-o)，查找到的图标编码是(0xf2c0)。

工具栏显示字体图标示例：

#include <QToolBar>

// 在QMainWindow主界面，添加一个QToolBar工具栏对象
auto* p_toolbar = this->addToolBar("");
// 设置图标字体
p_toolbar->setFont(m_fontIconFont);

// 添加图标工具按钮
auto* p_aciton1 = p_toolbar->addAction(QChar(0xf244));    // 字体图标
p_aciton1->setToolTip("字体图标1");
auto* p_aciton2 = p_toolbar->addAction(QChar(0xf243));    // 字体图标
p_aciton2->setToolTip("字体图标2");
auto* p_aciton3 = p_toolbar->addAction(QChar(0xf242));    // 字体图标
p_aciton3->setToolTip("字体图标3");
auto* p_aciton4 = p_toolbar->addAction(QChar(0xf241));    // 字体图标
p_aciton4->setToolTip("字体图标4");
auto* p_aciton5 = p_toolbar->addAction(QChar(0xf240));    // 字体图标
p_aciton5->setToolTip("字体图标5");

按钮显示字体图标示例：

#include <QPushButton>

QPushButton * p_push_button = new QPushButton(this);
p_push_button->setGeometry(50, 50, 128, 84);
auto font = m_fontIconFont;
// 设置图标字体大小
font.setPixelSize(36);
p_push_button->setFont(font);
p_push_button->setText(QChar(0xf2bb));          // 字体图标
p_push_button->setStyleSheet("QPushButton { color: red; }");    // 设置按钮图标红色

QLabel显示字体图标示例：

#include <QLabel>
#include <QLineEdit>

// 用户图标
QLabel* p_label1 = new QLabel(this);
p_label1->setGeometry(20, 150, 24, 24);
p_label1->setFont(m_fontIconFont);
p_label1->setText(QChar(0xf2c0));                // 字体图标
QLineEdit* p_line_edit1 = new QLineEdit(this);
p_line_edit1->setGeometry(50, 150, 128, 24);

// 密码图标
QLabel* p_label2 = new QLabel(this);
p_label2->setGeometry(20, 180, 24, 24);
p_label2->setFont(m_fontIconFont);
p_label2->setText(QChar(0xf084));                // 字体图标
QLineEdit* p_line_edit2 = new QLineEdit(this);
p_line_edit2->setGeometry(50, 180, 128, 24);