Using font awesome in QML: wrong characters - qt

Question

I would like to use font awesome font in my QML app. But it doesn't work very well.
First I use this method : https://github.com/QMLCommunity/font-awesome-qml
But I got only two icons working, see the capture of my app.
Only the laptop and battery icons are displayed. The others (one top left, and others on each tab) got kanjis or other symbols.
After I also tried that solution : How to use Font Awesome in QML
on the top left icon, whithout success.
Here the code of the notification bar :
RowLayout {
anchors.fill: parent
Label {
font.pointSize: 10
font.family: "fa-solid-900"
text: "\uf071" + " Message"
}
Item {
Layout.fillWidth: true
}
Label {
font.pointSize: 10
font.family: awesome.family
text: awesome.loaded ? awesome.icons.fa_laptop : "x"
Layout.alignment: Qt.AlignRight
}
Label {
font.pointSize: 10
font.family: awesome.family
text: awesome.loaded ? awesome.icons.fa_battery_full + " 100 %" : "x"
Layout.alignment: Qt.AlignRight
}
}
PS: I used the 2nd link solution for the first icon, but the result is exactly the same with the first solution.
And the tab bar:
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
Material.theme: Material.Dark
FontAwesome {
id: awesome
resource: "qrc:///controls/fa-solid-900.ttf"
}
TabButton {
font.pointSize: 10
font.family: awesome.family
text: (awesome.loaded ? awesome.icons.fa_star : "x") + " " + "Général"
}
TabButton {
font.pointSize: 10
font.family: awesome.family
text: (awesome.loaded ? awesome.icons.fa_cogs : "x") + " " + "Test"
}
TabButton {
font.pointSize: 10
font.family: awesome.family
text: (awesome.loaded ? awesome.icons.fa_trophy : "x") + " " + "Match"
}
}
How can I display the right icons each time?
Thanks in advance!

Answer 1

I recently ran into the same issues and documented my approach in a blog post.
Basically, my issue was that starting with version 5, Font Awesome provides some of the icons in one font file with "regular" weight and one in a file with "solid" weight classes. However, when loading, both will register with a font name of "Font Awesome 5 Free" (assuming the free version is used).
I would have expected that it is possible to switch between the regular and solid icon sets by setting e.g. the bold property of a font in QML:
import QtQuick 2.0
Item {
width: 100
height: 100
FontLoader {
id: faRegular
source: "./fa-regular-400.ttf"
}
FontLoader {
id: faSolid
source: "./fa-solid-900.ttf"
}
Column {
width: parent.width
Text {
font.family: "Font Awesome 5 Free"
font.bold: true // use "solid" variant
text: "\uf073" // fa-calendar-alt
}
Text {
font.family: "Font Awesome 5 Free"
font.bold: false // use "regular" variant
text: "\uf073" // fa-calendar-alt
}
}
}
Unfortunately, this did not work for me, as Qt merges both fonts and only either the regular or the solid variant was used (which causes some icons from not being rendered at all, especially if you use the regular variant which contains much less icons at least in the free version of the font).
My "solution" was to edit the solid font file (e.g. using FontForge) and change the font name to e.g. "Font Awesome 5 Free Solid". With this, I was able to load both variants of the font at the same time and switch between the two by using their font name like this:
import QtQuick 2.0
Item {
width: 100
height: 100
FontLoader {
id: faRegular
source: "./fa-regular-400.ttf"
}
FontLoader {
id: faSolid
source: "./fa-solid-900.ttf"
}
Column {
width: parent.width
Text {
font.family: faSolid.name // use solid variant
text: "\uf073" // fa-calendar-alt
}
Text {
font.family: faRegular.name // use regular variant
text: "\uf073" // fa-calendar-alt
}
}
}

Answer 2

This is probably due to font merging when some characters cannot be resolved. You can try to load FontAwesome from C++ side
Loading the font with a QFontDatabase
int fontId = QFontDatabase::addApplicationFont(QStringLiteral("/path/to/font-awesome.ttf");
Disabling merging on a new font
QFont font("fa-solid-900"); // You can also use the fontId to get family name here
font.setStyleStrategy(QFont::NoFontMerging);
Exposing the font to QML with a QFont Q_PROPERTY or directly in the context
Q_PROPERTY(QFont fontAwesome READ fontAwesome CONSTANT)
This is discussed in the Qt mailing list here