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代码引入