Qt字體圖標庫fontawesome和pixeden使用示例

圖標庫下載

• pixeden官網：pixeden
• fontawesome官網：Font Awesome

pixeden圖標類型會多一些， 而且是分類的，每個類別都是一個文件，推薦。

代碼實現

把圖標庫裏的ttf字體文件添加到Qt工程裏，通過以下代碼實現圖標顯示。

#include <QFontDatabase>


void MainWindow::iconDemo()
{
    //pe-icon-set-weath.ttf圖標庫示例
    //https://www.pixeden.com/icon-fonts
    //e901-e9cd
    int fontId_pdn = QFontDatabase::addApplicationFont(":/icon/pe-icon-set-weather.ttf");  //加入字體，並獲取字體ID
    QString fontName_pdn = QFontDatabase::applicationFontFamilies(fontId_pdn).at(0);    //獲取字體名稱
    QFont iconFont_pdn = QFont(fontName_pdn);
    iconFont_pdn.setPixelSize(50);     //設置字體大小

    ui->lbe_pdn->setFont(iconFont_pdn);
    ui->lbe_pdn->setText(QChar(0xe901));   //圖標ID
    ui->lbe_pdn->setStyleSheet("color: rgb(255, 0, 0);");
//    ui->lbe_pdn->setStyleSheet("color:red;");

    ui->btn_pdn->setFont(iconFont_pdn);
    ui->btn_pdn->setText(QChar(0xe903));    //圖標ID
    ui->btn_pdn->setStyleSheet("color: rgb(0, 255, 0);");
//    ui->btn_pdn->setStyleSheet("color:blue;");

/**********************************************************************/

    //fontawesome-webfont.ttf圖標庫示例
    //http://www.fontawesome.com.cn/
    int fontId_fws = QFontDatabase::addApplicationFont(":/icon/fontawesome-webfont.ttf");  //加入字體，並獲取字體ID
    QString fontName_fws = QFontDatabase::applicationFontFamilies(fontId_fws).at(0);    //獲取字體名稱
    QFont iconFont_fws = QFont(fontName_fws);
    iconFont_fws.setPixelSize(50);     //設置字體大小

    ui->lbe_fws->setFont(iconFont_fws);
    ui->lbe_fws->setText(QChar(0xf185));   //圖標ID
    ui->lbe_fws->setStyleSheet("color: rgb(255, 0, 0);");
//    ui->lbe_fws->setStyleSheet("color:red;");

    ui->btn_fws->setFont(iconFont_fws);
    ui->btn_fws->setText(QChar(0xf0e7));    //圖標ID
    ui->btn_fws->setStyleSheet("color: rgb(0, 255, 0);");
//    ui->btn_fws->setStyleSheet("color:blue;");
}

天氣圖標陣列顯示

void MainWindow::iconDemo()
{
    //pe-icon-set-weath.ttf圖標庫示例
    //https://www.pixeden.com/icon-fonts
    //e901-e9cd
    int fontId = QFontDatabase::addApplicationFont(":/icon/pe-icon-set-weather.ttf");  //加入字體，並獲取字體ID

    QString fontName = QFontDatabase::applicationFontFamilies(fontId).at(0);    //獲取字體名稱
    QFont iconFont = QFont(fontName);
    iconFont.setPixelSize(50);     //設置字體大小

    int iconID = 0xe900;
    int R = 2;
    int G = 2;
    int B = 2;
    QString styleSheet;

    //Label顯示效果
    for(int row = 0; row < 5; row++)
    {
        for(int col = 0; col < 5; col++)
        {
            QLabel *lbe = new QLabel(this);

            lbe->setFont(iconFont);
            lbe->setText(QChar(iconID));   //圖標ID
            lbe->setStyleSheet(styleSheet);
            lbe->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);
            ui->gridLayout->addWidget(lbe, row, col);
            iconID += 1;
        }
        R = 20;
        G = row * 50 + 50;
        B = 10;
        styleSheet = "color: rgb(" + QString::number(R) + ", " + QString::number(G) + ", " + QString::number(B) + ");";
    }

    //PushButton顯示效果
    for(int row = 5; row < 10; row++)
    {
        for(int col = 0; col < 5; col++)
        {
            QPushButton *btn = new QPushButton(this);

            btn->setFont(iconFont);
            btn->setText(QChar(iconID));   //圖標ID
            btn->setStyleSheet(styleSheet);

            ui->gridLayout->addWidget(btn, row, col);
            iconID += 1;
        }
        R = 10;
        G = row * 20 + 50;
        B = 100;
        styleSheet = "color: rgb(" + QString::number(R) + ", " + QString::number(G) + ", " + QString::number(B) + ");";
    }
}