Qt使用fontawesome

一、简单用法

以v4.x版本为例：

1、进入官网下载http://fontawesome.dashgame.com/

 

2、安装

.\font-awesome-4.7.0\fonts\fontawesome-webfont.ttf,双击即可安装

安装成功在系统的字体库里就能看到

3、在线找图标

 

 

 

 

 

 

 

 

 

 

 

 

 

如需要这个图标，就复制其名字

4、得到代码

.\font-awesome-4.7.0\css\font-awesome.css中搜索

得到其代码为：\f2b9

5、使用【QML】

拷贝fontawesome-webfont.ttf到工程路径中

main.cpp

// 添加字体文件
int fontId = QFontDatabase::addApplicationFont(":/Font/fontawesome-webfont.ttf");
QStringList fontFamilies = QFontDatabase::applicationFontFamilies(fontId);
qDebug() << "fontFamilies.size() " << fontFamilies.size();

 main.qml

Text{
    color: "green"
    font.family: "FontAwesome"
    font.pixelSize: 30
    text: "\uf004"
}

 

 

 6、QWidget使用

int fontId = QFontDatabase::addApplicationFont(":/font/fontawesome-webfont.ttf");
QStringList fontFamilies = QFontDatabase::applicationFontFamilies(fontId);
QFont font;
font.setFamily(fontFamilies.at(0));
font.setPointSize(20);

ui->label->setFont(font);
ui->label->setText(QChar(0xf015));

 

 

 

备注：也可以https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started下载支持的svg图标，此时windows一般不能在文件夹中预览svg，需要下载svg预览插件:

复制其名字在css中寻找代码即可

 

二、高级用法【这里只针对QML而言】

 

上面的用法需要用图标的unicode，代码review的时候很不直观，如果直接用官方提供的英文名就好了，变量命名都省了。其实原理很简单：就是用一个配置文件将所有的unicode和官方变量名对应起来。

1、以V5.8为例，官网下载之后，获取这些文件：

ttf文件貌似是v4.x版本的，我们没用到，但还是放这里吧，万一某些情况需要呢。

 

 

 2、新建Fonts.qml文件

// Fonts.qml

pragma Singleton

import QtQuick 2.0

Item {
    id: fonts

    readonly property FontLoader fontAwesomeRegular: FontLoader {
        source: "./Font Awesome 5 Free-Regular-400.otf"
    }
    readonly property FontLoader fontAwesomeSolid: FontLoader {
        source: "./Font Awesome 5 Free-Solid-900.otf"
    }
    readonly property FontLoader fontAwesomeBrands: FontLoader {
        source: "./Font Awesome 5 Brands-Regular-400.otf"
    }

    readonly property string solid: fonts.fontAwesomeSolid.name
    readonly property string regular: fonts.fontAwesomeRegular.name
    readonly property string brands: fonts.fontAwesomeBrands.name
}

3、新建qmldir文件

singleton Fonts 1.0 Fonts.qml  //生成单例

现在的工程结构：

 

  

Fonts.qml用于使用otf文件；

qmldir将Fonts.qml生成一个单例：Fonts；

fontawesome.js是unicode和变量的对照文件。

PS：最开始没有将js文件放进资源文件里，但是由于QML的import多层路径文件，会出现找不到路径和文件的情况，为了方便还是都放进资源文件里吧。。

 4、获取对照文件

使用python将官方的对照文件里的信息提炼出来，生成fontawesome.js文件

 大概就是三个文件的对照表，尽量用solid变量的。

5、QML使用

import QtQuick 2.15
import QtQuick.Window 2.15
import "qrc:/fonts"
import "qrc:/fonts/fontawesome.js" as FontAwesome
Window {
    width: 1200
    height: width/1.5
    visible: true

    Text {
        anchors.centerIn: parent
        text: FontAwesome.icons_solid.fa_angle_down
        font.family: Fonts.solid
        font.pixelSize: 28
    }
}

 

 

 PS：这里使用的是QML，如果是Qt也可以生成json配置文件。

参考：https://blog.csdn.net/zerg_nick/article/details/90206183

资源下载：https://download.csdn.net/download/m0_53292003/66314100