当前位置：首页 > news >正文

Qt 使用阿里矢量图标库

news 2025/11/5 8:33:36

前言

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

第一步：

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

第二步：

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

第三步：

点击右上方购物车，选择添加至项目
在这里插入图片描述

点击这个小图标，新建项目，项目名为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代码引入

前言