Qt 使用阿里矢量图标库

前言

阿里矢量图标库非常好用,里面有各种丰富的图标,完全免费,还支持自定义图标,还可以将图标打包到一个项目中,使用起来非常方便。

第一步:

打开阿里矢量图标库
在这里插入图片描述

第二步:

搜索图标,点击添加入库,可以多选择几个图标添加入库
在这里插入图片描述

第三步:

点击右上方购物车,选择添加至项目
在这里插入图片描述
在这里插入图片描述
点击这个小图标,新建项目,项目名为fruits(当然也可以和我不一样)
在这里插入图片描述
在这里插入图片描述
点击确定,可以看到
在这里插入图片描述

第四步:

在这里插入图片描述

第五步:

解压下载的文件,可以看到
在这里插入图片描述

第六步:

现在我们打开Qt,新建一个项目,项目名为useIconfont
在这里插入图片描述

这里选择QWidget就行,编译器msvc或者mingw都行
在这里插入图片描述

第七步:

右键项目,添加新文件
在这里插入图片描述
选择资源文件,命名为Resources
在这里插入图片描述
在这里插入图片描述
然后下一步,确定即可

第八步:

右键项目,在explorer中显示,然后新建一个文件夹,名称为Src,将你下载并且解压后的文件夹放到里面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第九步:

右键Resources.qrc文件,选择open in editor
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
然后一定一定要保存

第十步:

打开项目ui界面,添加标签,并将标签中的内容去掉
在这里插入图片描述
在widget.cpp中添加如下代码

#include "widget.h"
#include "ui_widget.h"
#include <QFontDatabase>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//1载入外部文件,注意这个路径添加你自己的路径int fontId = QFontDatabase::addApplicationFont(":/Src/font_4650027_8bxu9ltretb/iconfont.ttf");//2.获取字体名称QString fontName = QFontDatabase::applicationFontFamilies(fontId).at(0);//3.设置到QFont中QFont iconFont = QFont(fontName);//用于设置要显示的图片的大小,单位为像素iconFont.setPixelSize(36);//直接在ui中的控件ui->label->setFont(iconFont);ui->label->setText(QChar(0xe66f));ui->label->resize(70,70);iconFont.setPixelSize(54);ui->label_2->setFont(iconFont);ui->label_2->setText(QChar(0xe603));ui->label_2->resize(54,54);//尝试添加样式,可行ui->label_3->setFont(iconFont);ui->label_3->setText(QChar(0xe604));ui->label_3->setStyleSheet("background-color: rgb(0, 255, 0);");ui->label_3->resize(54,54);//设置没有边框iconFont.setPixelSize(30);ui->label_4->setFont(iconFont);ui->label_4->setText(QChar(0xe67b));ui->label_4->resize(30,30);}Widget::~Widget()
{delete ui;
}

第十一步:

注意导入外部文件时可以通过copy path来复制路径
在这里插入图片描述
还有一点就是setText(QChar())这个地方,QChar中的内容填你自己的unicode数据,可以在你下载的html文件中查看
在这里插入图片描述

第十二步:

显示运行,结果
在这里插入图片描述

完成

小结

你可能会疑惑为什么图标没有颜色,这是因为Unicode默认情况下不支持多色,直接添加多色图标会自动去色;但是着对于我们引入工具类图标非常有用,而且对于引入的图标还可以进行css设置样式,如果你非要引入有颜色的图标的话阿这里有两种方法,第一种很直接就是把图片下载下来,直接引入就行了;第二种就是要编写html代码,然后将文件夹中的js代码引入

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/402048.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pcl-滤波模块

点云需要滤波的原因 点云数据密度不规则需要平滑因为遮挡等问题造成离群点需要去除大量数据需要下采样噪音数据需要去除 1.直通滤波 对指定的某一维度实行简单的滤波&#xff0c;就是类似于2D处理中的画ROI&#xff0c;此滤波可以将x&#xff08;y和z&#xff09;在某一范围…

Datawhale X 魔搭 AI夏令营第四期 魔搭-AIGC方向 task03笔记

Datawhale官方的Task3链接&#xff1a;Task03 往期Task1、Task2链接&#xff1a;Task01&#xff0c; Task02 【学习者手册】&#xff1a;链接直达 【QA文档】&#xff1a;链接直达 【赛事官网】&#xff1a;链接直达 ComfyUI ComfyUI是一个基于深度学习的图像生成软件&…

【Linux操作系统】进程概念

目录 一、进程概念1.1 什么是进程 二、task_struct内容分类2.1 标识符2.2 进程状态2.2.1 进程排队2.2.2 关于进程状态的表述——运行、阻塞、挂起2.2.3 Linux中具体的进程状态2.2.4 孤儿进程 2.3 进程优先级 三、Linux的调度与切换3.1 进程切换3.2 进程调度 四、环境变量4.1 ma…

【Redis】Redis 数据类型与结构—(二)

Redis 数据类型与结构 一、值的数据类型二、键值对数据结构三、集合数据操作效率 一、值的数据类型 Redis “快”取决于两方面&#xff0c;一方面&#xff0c;它是内存数据库&#xff0c;另一方面&#xff0c;则是高效的数据结构。 Redis 键值对中值的数据类型&#xff0c;也…

C++练习备忘录

1. 保留两位小数输出格式 #include <iostream> #include <iomanip> using namespace std; int main() {double S 0;S (15 25) * 20 / 2;cout << fixed << setprecision(2) << S;return 0; }2. 设置输出宽度 #include <iostream> #inclu…

自研低代码海报制作平台学习分享计划

vue3组件库开发前面咱卷完了JuanTree组件&#xff0c;接下来一起来卷vue3低代码海报制作平台的基础组件实现。首先是拖拽基础组件的开发&#xff0c;整好把前面学习的知识点再运用进来。 文章目录 效果演示基本拖拽区域拖拽旋转其他效果待实现 录屏说明 看一步步实现的效果&…

【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面(一)

学完时间&#xff1a;2024年8月14日 一、前言叨叨 学习HarmonyOS的第六课&#xff0c;人数又成功的降了500名左右&#xff0c;到了3575人了。 二、ArkWeb 1、概念介绍 ArkWeb是用于应用程序中显示Web页面内容的Web组件&#xff0c;为开发者提供页面加载、页面交互、页面调…

python实现每天定时发送邮件

文章目录 步骤 1: 安装所需的库步骤 2: 编写发送电子邮件的 Python 脚本步骤 3: 配置电子邮件发送服务步骤 4: 运行脚本进一步扩展 要编写一个用于自动发送每日电子邮件报告的 Python 脚本&#xff0c;并配置它在每天的特定时间发送电子邮件&#xff0c;使用 smtplib 和 emai…

java基础进阶——log日志、类加载器、XML、单元测试、注解、枚举类

前言 这篇内容主要掌握的就是logback使用、理解类加载器、XML文件的编写&#xff0c;XML文档约束schema&#xff0c;用Dom4j解析XML文档&#xff0c;Xpath检索XML文档&#xff0c;完整使用Junit单元测试框架常用部分&#xff0c;注解的定义和使用&#xff0c;枚举类的定义和开发…

二叉树(二)

一、二叉树的顺序结构 普通的二叉树是不适合用数组来存储的&#xff0c;因为可能会存在大量的空间浪费。而完全二叉树更适合使用顺序结构存储。现实中我们通常把堆&#xff08;一种二叉树&#xff09;使用顺序结构的数组来存储&#xff0c;需要注意的是这里的堆和操作系统虚拟…

Self-Supervised Learning(李宏毅老师系列)

自学参考&#xff1a; BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding BERT 论文逐段精读 视频课 课件资料 笔记 一、概述 自监督学习模型与芝麻街~ 参数量 ELMO&#xff1a;94MBERT&#xff1a;340MGPT-2&#xff1a;1542MMegatron&…

ubuntu查看CPU、内存、硬盘

1、查看CPU cat /proc/cpuinfo 我这台机器CPU是2核&#xff0c;所以这里是2核 或者使用如下命令也可以查看 lscpu 查看CPU使用率 top 2、查看内存 查看内存信息&#xff1a; free -h 查看内存使用情况&#xff1a; vmstat 3、硬盘 查看硬盘使用情况&#xff1a; df -…

uniapp 日常业务 随便写写 源码

现成的组件 直接用 <template><view style"margin: 10rpx;"><view class"tea-header"><text class"tea-title">礼尚往来</text><view class"tea-view-all"><text>查看全部</text>&l…

免费录屏软件之QQ

录屏太简单了 1、首先下载QQ 2、在随便打开个对话框&#xff0c;再操作1、2步骤即可 3、嫌打开对话框麻烦&#xff1f; 4、打开QQ后直接按下CtrlAltR即可录屏&#xff0c;连对话框都不用打开了&#xff0c;按完快捷键后效果如下&#xff1a; 5、点击右下角开始录屏即可

Electron:摄像头录制和屏幕录制

摄像头录制 main.js const { app, BrowserWindow} require(electron)let mainWin null const createWindow () > {mainWin new BrowserWindow({width: 800,height: 600,title: 自定义菜单,webPreferences: {// 允许渲染进程使用nodejsnodeIntegration: true,// 允许渲…

idea付费插件激活

以下idea付费插件均可激活 获取链接&#xff1a;https://web.52shizhan.cn

【Qt开发】QtCharts图表 在ui上添加QChartView控件并进行绘图配置

【Qt开发】QtCharts图表 在ui上添加QChartView控件并进行绘图配置 文章目录 控件安装和模块导入在ui上添加QChartView控件QChartView图表配置附录&#xff1a;C语言到C的入门知识点&#xff08;主要适用于C语言精通到Qt的C开发入门&#xff09;C语言与C的不同C中写C语言代码C语…

Datawhale X 魔搭 AI夏令营 Task1 从零入门AI生图原理实践笔记

赛题内容 参赛者需在可图Kolors模型的基础上训练LoRA模型&#xff0c;生成无限风格&#xff0c;如水墨画风格、水彩风格、赛博朋克风格、日漫风格… 基于LoRA模型生成8张图片组成连贯故事&#xff0c;故事内容可自定义&#xff1b;基于8图故事&#xff0c;评估LoRA风格的美感度…

基于 Android studio 实现停车场管理系统--原创

目录 一、项目演示 二、开发环境 三、项目页面 四、项目详情 五、项目完整源码 一、项目演示 二、开发环境 三、项目详情 1.启动页 这段代码是一个简单的Android应用程序启动活动&#xff08;Activity&#xff09;&#xff0c;具体功能如下&#xff1a; 1. **延迟进入登…

【OpenCV】window 下 VS Code 配置OpenCV

文章目录 前言直接使用OpenCV 编译好的库自己编译OpenCVVS Code 安装MinGW下载下载Cmake编译OpenCV VS Code 运行cv程序VSCode配置运行CV程序 参考文章 前言 在网上找了些资料&#xff0c;大致得出VS Code开发OpenCV的环境配置流程&#xff0c;如下 安装VS Code安装MinGW安装…