一、简单用法
以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