前言
阿里矢量图标库非常好用,里面有各种丰富的图标,完全免费,还支持自定义图标,还可以将图标打包到一个项目中,使用起来非常方便。
第一步:
打开阿里矢量图标库
第二步:
搜索图标,点击添加入库,可以多选择几个图标添加入库
第三步:
点击右上方购物车,选择添加至项目
点击这个小图标,新建项目,项目名为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代码引入