CODEWITHSUNDEEP
qtqmlfont-awesomefont-awesome-5
Hyndrix
Hyndrix

Reputation: 4452

Only some Font Awesome 5 icons work in Qt Qml

I am trying to show Font Aweseom 5 (5.10.2) icons in a Qt Qml label:

Label {
    text: "\uf2bb" + " x " + "\uf002"
    font.family: "Font Awesome 5 Free"
    //font.weight: Font.Normal
}

On Windows all icons work as expected. But on all other platforms (macOS, Android, iOS) only some icons (for instance \uf2bb) are shown while others (\uf4b4) do not work and a simple rectangle is shown instead. But all icons work on all platforms when QWidgets are used.

I verified that the "Font Awesome 5 Free" font is installed in the QFontDatabase using this utility list view:

ListView {
    anchors.fill: parent;
    model: Qt.fontFamilies()

    delegate: Item {
        height: 40;
        width: ListView.view.width
        Label {
            anchors.centerIn: parent
            text: modelData;
        }
    }
}

Has anyone an idea why some icons work in Qml, while others don't?

Regards,

Upvotes: 4

Views: 894

Answers (2)

Albertino80
Albertino80

Reputation: 1093

I fixed this problem with https://fontforge.org/

On file fa-solid-900.ttf I modified the field WWS Family (under tab TTF Names) from Font Awesome 5 Free to Font Awesome 5 Free Solid

Maybe Qt for Android uses this field and without modification the value is the same for fa-regular-400.ttf and fa-solid-900.ttf

Hope it helps

Upvotes: 1

Hyndrix
Hyndrix

Reputation: 4452

Either setting the font weight to Font.Black or the font's style name to "Solid" fixes the problem:

Label {
    text: "\uf2bb" + " x " + "\uf002"
    font.family: "Font Awesome 5 Free"
    font.weight: Font.Black // this does the trick
}

Label {
    text: "\uf2bb" + " x " + "\uf002"
    font.family: "Font Awesome 5 Free"
    font.styleName: "Solid" // this does the trick
}

Upvotes: 1

Related Questions