Qt 上位机开发常用图库
疑问：日常Qt上位机开发，如何设计出优美的界面？ 来源：iconfont 阿里巴巴矢量图标库
官网：www.iconfont.cn
01、iconfont 简介
iconfont 是阿里巴巴旗下阿里妈妈体验设计中心倾力打造的矢量图标管理、搜索与交流平台，是目前国内最大、最全的免费图标资源库。
平台拥有超过 3300 万+ 个图标资源，涵盖图标库、矢量插画库、3D 插画库、动效库（Lottie）、字体库等多种素材类型，是 Qt 上位机开发者获取界面图标的首选平台。
核心定位
┌──────────────────────────────────────────────────┐
│ iconfont 平台能力全景 │
├──────────────────────────────────────────────────┤
│ │
│ 素材搜索 ──→ 图标 / 插画 / 3D / 动效 / 字体 │
│ │ │
│ ├──→ 自定义下载（SVG / PNG / AI / 代码） │
│ │ │
│ ├──→ 字体化引用（Unicode / Font-Class） │
│ │ │
│ ├──→ 项目管理（创建项目 / 协作共享） │
│ │ │
│ ├──→ 在线编辑（分路径改色 / 分图层编辑） │
│ │ │
│ └──→ AI 生成图标（文生图，9种风格） │
│ │
└──────────────────────────────────────────────────┘
02、平台核心功能
2.1 海量素材资源
| 素材类型 | 说明 | Qt 开发适用场景 |
|---|---|---|
| 图标库 | 3300万+ 矢量图标，支持 SVG/PNG 下载 | 按钮、菜单、工具栏、状态指示 |
| 矢量插画库 | 高质量矢量插画素材 | 启动画面、空状态占位图 |
| 3D 插画库 | 3D 风格插画素材 | 软件封面、引导页 |
| 动效库（Lottie） | Lottie JSON 动画素材 | 加载动画、交互动效 |
| 字体库 | 在线可变字体服务 | 界面排版字体 |
2.2 图标风格分类
iconfont 支持多种图标风格，开发者可按需筛选：
| 大类 | 风格 | 特点 |
|---|---|---|
| 线性 | 纤巧线性 | 细线条，精致轻量 |
| 常规线性 | 标准线宽，通用性强 | |
| 浑厚线性 | 粗线条，醒目大气 | |
| 详细线性 | 细节丰富，信息量大 | |
| 极细线性 | 超细线条，极简风格 | |
| 面性 | 简约面性 | 填充色块，识别度高 |
| 手绘 | 涂鸦风 | 自由随性，个性表达 |
| 手绘风 | 温暖亲和，人性化 | |
| 插画风 | 艺术感强，装饰性好 | |
2.3 AI 生成图标
平台内置 AI 图标生成 功能，支持通过文字描述自动生成图标：
输入关键词（如"设置齿轮"）→ 选择风格 → AI 生成 → 下载使用
支持 9 种生成风格：纤巧线性、常规线性、浑厚线性、简约面性、详细线性、极细线性、涂鸦风、手绘风、插画风。
2.4 项目管理与协作
┌─────────────┐ 创建项目 ┌─────────────┐
│ 开发者 A │ ──────────────→ │ 图标项目 │
│ (搜索图标) │ │ (统一管理) │
└─────────────┘ └──────┬──────┘
│
┌───────────────────┼───────────────────┐
│ │ │
┌─────┴─────┐ ┌─────┴─────┐ ┌─────┴─────┐
│ 开发者 B │ │ 开发者 C │ │ 设计师 D │
│ (下载使用) │ │ (下载使用) │ │ (上传图标) │
└───────────┘ └───────────┘ └───────────┘
- 创建项目：将搜索到的图标统一添加到项目中管理
- 协作共享：项目成员可共享图标资源，团队协作效率高
- 批量下载：支持项目内图标批量下载为 SVG / PNG / 字体文件
03、图标使用方式详解
iconfont 提供三种图标引用方式，对 Qt 开发者而言各有适用场景：
3.1 三种方式对比
| 引用方式 | 格式 | Qt 适用性 | 推荐度 |
|---|---|---|---|
| SVG 下载 | 矢量图形文件 | ★★★★★ 最佳 | 首选 |
| PNG 下载 | 位图文件 | ★★★★☆ 优秀 | 次选 |
| Unicode 字体 | TTF 字体文件 | ★★★★☆ 优秀 | 特定场景 |
| Font-Class | CSS 类名 | ★☆☆☆☆ 不适用 | 仅 Web |
| Symbol | SVG Sprite | ★☆☆☆☆ 不适用 | 仅 Web |
结论：Qt 上位机开发推荐使用 SVG 下载 或 TTF 字体文件 两种方式。
3.2 方式一：SVG 矢量图下载（推荐）
优势：矢量格式，任意缩放不失真，支持 QIcon 直接加载，支持 QSvgRenderer 按路径渲染改色。
操作步骤：
- 在 iconfont 搜索目标图标
- 鼠标悬停在图标上 → 点击 下载 按钮
- 选择 SVG 格式下载
- 将 SVG 文件放入 Qt 项目资源目录
Qt 代码示例：
// 方式一：QIcon 直接加载 SVG
QPushButton *btn = new QPushButton(this);
btn->setIcon(QIcon(":/icons/settings.svg"));
btn->setIconSize(QSize(24, 24));
// 方式二：QSvgRenderer 渲染（支持动态改色）
#include <QSvgRenderer>
#include <QPainter>
QSvgRenderer renderer(QString(":/icons/settings.svg"));
QPixmap pixmap(48, 48);
pixmap.fill(Qt::transparent);
QPainter painter(&pixmap);
renderer.render(&painter);
btn->setIcon(QIcon(pixmap));
3.3 方式二：PNG 位图下载
优势：兼容性最好，所有 Qt 控件均支持，适合在 Qt Designer 中直接设置。
操作步骤：
- 搜索图标 → 点击下载
- 选择 PNG 格式，可自定义颜色和尺寸
- 下载后放入项目资源目录
Qt 代码示例：
// 代码方式加载 PNG
QAction *action = new QAction(QIcon(":/icons/open.png"), "打开", this);
menu->addAction(action);
// Qt Designer 方式：直接在属性编辑器中设置 icon 属性
// 选择 PNG 文件即可，Designer 会自动处理
3.4 方式三：TTF 字体文件（进阶）
优势：将多个图标打包为一个字体文件，体积小、加载快，通过 Unicode 编码调用，适合大量图标统一管理。
操作步骤：
- 搜索图标 → 添加到购物车（页面右上角）
- 进入购物车 → 点击 添加至项目
- 在项目管理页面 → 点击 下载至本地
- 下载的压缩包中包含
iconfont.ttf字体文件和demo示例
Qt 代码示例：
#include <QFontDatabase>
#include <QLabel>
#include <QPalette>
// 1. 加载 TTF 字体文件
int fontId = QFontDatabase::addApplicationFont(":/fonts/iconfont.ttf");
QString fontFamily = QFontDatabase::applicationFontFamilies(fontId).at(0);
// 2. 创建图标字体
QFont iconFont(fontFamily);
iconFont.setPixelSize(32); // 设置图标大小
// 3. 在 QLabel 上显示图标
QLabel *iconLabel = new QLabel(this);
iconLabel->setFont(iconFont);
iconLabel->setText(QChar(0xe001)); // 使用 Unicode 编码
// 4. 设置图标颜色
// 方式 A：QSS 样式表
iconLabel->setStyleSheet("color: #4CAF50;");
// 方式 B：QPalette 调色板
QPalette palette;
palette.setColor(QPalette::WindowText, QColor("#4CAF50"));
iconLabel->setPalette(palette);
提示：Unicode 编码可在下载的
demo_index.html或demo_unicode.html文件中查看每个图标对应的编码。
04、Qt 上位机开发实战指南
4.1 图标格式选择策略
┌─ 需要动态改色？
│ ├── 是 → SVG（QSvgRenderer）
│ └── 否 ↓
│
选用图标格式 ──────┤ 图标数量多？
│ ├── 是（>20个）→ TTF 字体文件
│ └── 否 ↓
│
│ 在 Designer 中设置？
│ ├── 是 → PNG（最方便）
│ └── 否 → SVG（代码控制灵活）
│
└─ 程序窗口图标 / 系统托盘
→ ICO 格式（Windows 平台）
4.2 资源文件配置
将下载的图标文件添加到 Qt 项目的 .qrc 资源文件中：
<!-- resources.qrc -->
<RCC>
<qresource prefix="/">
<file>icons/settings.svg</file>
<file>icons/open.png</file>
<file>icons/save.png</file>
<file>icons/exit.png</file>
<file>fonts/iconfont.ttf</file>
</qresource>
</RCC>
在 .pro 项目文件中添加：
RESOURCES += resources.qrc
4.3 常用上位机图标推荐搜索关键词
| 界面区域 | 推荐搜索关键词 | 典型用途 |
|---|---|---|
| 菜单栏 | 设置、配置、选项、齿轮 | 系统设置入口 |
| 工具栏 | 打开、保存、导出、导入、刷新 | 文件操作 |
| 状态栏 | 连接、断开、在线、离线、信号 | 通信状态指示 |
| 设备管理 | 设备、传感器、电池、芯片、电路 | 设备列表图标 |
| 数据图表 | 图表、曲线、柱状图、仪表盘 | 数据可视化 |
| 报警提示 | 警告、错误、信息、成功、感叹号 | 消息提示框 |
| 导航控制 | 首页、返回、前进、上一页、下一页 | 页面导航 |
| 用户管理 | 用户、管理员、权限、登录、注销 | 用户系统 |
| 工业控制 | 开关、阀门、电机、温度、压力 | 工控界面 |
4.4 图标颜色与主题适配
Qt 上位机开发中，图标颜色需与整体主题风格统一。以用户偏好的淡绿色主题为例：
// 淡绿色主题色值
const QColor PRIMARY_COLOR("#4CAF50"); // 主色 - 淡绿
const QColor HOVER_COLOR("#66BB6A"); // 悬停色
const QColor PRESSED_COLOR("#388E3C"); // 按下色
const QColor DISABLED_COLOR("#BDBDBD"); // 禁用色
// SVG 图标动态着色（推荐）
QSvgRenderer renderer(":/icons/device.svg");
QPixmap pixmap(32, 32);
pixmap.fill(Qt::transparent);
QPainter painter(&pixmap);
// 渲染时可通过 XML 修改 fill 颜色
renderer.render(&painter);
// TTF 字体图标着色
iconLabel->setStyleSheet(QString("color: %1;").arg(PRIMARY_COLOR.name()));
05、Qt 开发者常用图标网站汇总
除 iconfont 外，以下网站也是 Qt 上位机开发中常用的图标资源来源：
| 序号 | 网站名称 | 网址 | 特点 | 推荐度 |
|---|---|---|---|---|
| 1 | iconfont | www.iconfont.cn | 国内最大，3300万+图标，支持SVG/PNG/TTF，中文搜索友好 | ★★★★★ |
| 2 | Iconfinder | www.iconfinder.com | 国外平台，图标极全，支持相关图标推荐，搜索体验优秀 | ★★★★★ |
| 3 | Flaticon | www.flaticon.com | 国外平台，海量图标，支持多种格式下载 | ★★★★☆ |
| 4 | iconsDB | www.iconsdb.com | 支持自定义颜色，可按颜色筛选图标 | ★★★★☆ |
| 5 | The Noun Project | thenounproject.com | 风格统一，品质高，网速稍慢 | ★★★☆☆ |
| 6 | icons8 | icons8.com | 图标全面，含插图和照片，网速稍慢 | ★★★☆☆ |
| 7 | OpenMoji | openmoji.dashgame.com | 人物表情/Emoji 风格图标，趣味性强 | ★★★☆☆ |
| 8 | IconPark | iconpark.oceanengine.com | 字节跳动出品，风格统一，支持在线编辑 | ★★★★☆ |
06、图标格式技术对比
6.1 Qt 支持的图标格式
| 格式 | 矢量/位图 | 透明度 | Qt 支持 | 适用场景 |
|---|---|---|---|---|
| SVG | 矢量 | 支持 | QIcon / QSvgRenderer | 首选，任意缩放不失真 |
| PNG | 位图 | 支持 | QIcon（原生） | 次选，Designer 友好 |
| TTF | 矢量字体 | 支持 | QFont + QChar | 批量图标统一管理 |
| ICO | 位图 | 支持 | QIcon（原生） | 程序窗口图标 / 系统托盘 |
| JPG | 位图 | 不支持 | QIcon（原生） | 不推荐，无透明度 |
6.2 格式选择决策表
┌─────────────────────────────────────────────────────────┐
│ 图标格式选择决策 │
├──────────────┬──────────────────────────────────────────┤
│ 应用图标 │ ICO 格式（Windows .rc 文件配置） │
│ (程序窗口) │ 或 SVG 转 ICO │
├──────────────┼──────────────────────────────────────────┤
│ 工具栏按钮 │ SVG（代码设置）或 PNG（Designer 设置） │
├──────────────┼──────────────────────────────────────────┤
│ 菜单项图标 │ PNG（简单方便）或 SVG │
├──────────────┼──────────────────────────────────────────┤
│ 状态指示 │ TTF 字体（颜色动态切换方便） │
│ (在线/离线) │ 或 SVG + 代码着色 │
├──────────────┼──────────────────────────────────────────┤
│ 大量图标 │ TTF 字体文件（体积小，统一管理） │
│ (>20个) │ │
├──────────────┼──────────────────────────────────────────┤
│ 系统托盘 │ ICO 格式（必须） │
└──────────────┴──────────────────────────────────────────┘
07、iconfont 图标下载与使用完整流程
7.1 单个图标下载流程
[访问 iconfont.cn]
│
↓
[搜索关键词，如 "设备"]
│
↓
[筛选风格/颜色/是否收费]
│
↓
[鼠标悬停图标 → 点击「下载」]
│
├──→ 选择 SVG 格式 → 下载到本地
├──→ 选择 PNG 格式 → 自定义颜色/尺寸 → 下载
└──→ 选择 AI 格式 → 下载（需 Illustrator 编辑）
│
↓
[将文件放入 Qt 项目资源目录]
│
↓
[配置 .qrc 资源文件]
│
↓
[代码或 Designer 中加载使用] ✅
7.2 批量图标管理流程（TTF 字体方式）
[搜索图标 → 点击「购物车」图标加入]
│
↓
[继续搜索，添加多个图标到购物车]
│
↓
[点击右上角「购物车」→ 「添加至项目」]
│
↓
[新建项目或选择已有项目]
│
↓
[项目页面 → 「下载至本地」]
│
↓
[解压下载包]
├──→ iconfont.ttf → 加入 Qt 资源（字体图标）
├──→ iconfont.css → Web 用，Qt 忽略
├──→ demo_index.html → 查看 Unicode 编码
└──── demo_unicode.html → 查看 Unicode 编码
│
↓
[在 Qt 中加载 TTF → 通过 QChar(0xXXXX) 显示] ✅
08、注意事项与最佳实践
8.1 注意事项
| 注意点 | 说明 |
|---|---|
| 字体冲突 | iconfont 默认 font-family 名称为 iconfont，建议重命名避免冲突 |
| Unicode 编码 | 下载后查看 demo_index.html 获取每个图标的 16 进制编码 |
| SVG 规范 | 上传自定义 SVG 时注意路径规范，避免边界过大撑开字体 |
| 字体基线 | iconfont 调整过基线位置，图标可能与文字混排时略有偏移 |
| 离线使用 | 下载到本地后不依赖网络，TTF 和 SVG 均可离线使用 |
| 版权说明 | iconfont 平台图标免费使用，但需注意个别图标的设计师授权声明 |
8.2 Qt 上位机开发最佳实践
-
统一图标风格：整个项目选用同一风格的图标（如全部使用"常规线性"风格），保持视觉一致性
-
图标尺寸规范：
控件类型 推荐尺寸 工具栏按钮 24×24 px 菜单项 16×16 px 列表项 16×16 px 标签页 16×16 px 状态栏 16×16 px 大按钮/卡片 32×32 px 或 48×48 px -
颜色管理：定义统一的颜色常量，图标颜色与主题色保持一致
-
资源管理：所有图标文件放入项目
resources/icons/目录，通过.qrc文件统一管理 -
TTF 字体优先：当项目图标超过 20 个时，推荐使用 TTF 字体方式，减小程序体积
总结
iconfont 是 Qt 上位机开发中最推荐的图标资源平台，核心优势：
- 资源量大：3300万+ 图标，工业控制、设备管理类图标覆盖全面
- 格式灵活：SVG / PNG / TTF 三种格式满足 Qt 开发所有场景
- 免费易用：完全免费，支持中文语义搜索，下载即用
- 团队协作：项目管理功能支持团队共享图标资源
- AI 赋能：AI 图标生成功能可快速创建个性化图标
对于 Qt 上位机开发者，建议：
- 日常开发以 SVG 下载 为主，兼顾清晰度和灵活性
- 大量图标场景使用 TTF 字体文件 统一管理
- 配合 Qt Designer 可使用 PNG 格式快速布局
- 善用 iconfont 项目管理 功能建立团队图标资产库
参考链接
- iconfont 官网：www.iconfont.cn
- iconfont 图标库：www.iconfont.cn/collections…
- iconfont 帮助中心：www.iconfont.cn/help/index
- iconfont AI 生成图标：www.iconfont.cn/ai_icon
