Как использовать Font Awesome в QML

Мне нравится использовать fontello для создания минимального набора значков, а не загружать весь набор с FontAwesome. Используя текстовый редактор в качестве примера:

1. Загрузите шрифт и сохраните его где-нибудь в каталоге вашего проекта. В примере он находится в папке fonts.
2. Если вы используете файлы .qrc в своем проекте, добавьте их в один из них.

3. Я могу придумать два способа распознать шрифт в вашем QML: FontLoader и QFontDatabase::addApplicationFont(). Чтобы использовать QFontDatabase::addApplicationFont(), добавьте это перед загрузкой QML вашего приложения:

   QFontDatabase fontDatabase;
   if (fontDatabase.addApplicationFont(":/fonts/fontello.ttf") == -1)
       qWarning() << "Failed to load fontello.ttf";
   

4. Используйте коды Unicode в свойстве text любой элемент, значок которого вы хотите отобразить в:

   ToolButton {
       id: openButton
       text: "\uF115" // icon-folder-open-empty
       font.family: "fontello"
       onClicked: openDialog.open()
   }
   

Здесь есть решение: https://martin.rpdev.net/2018/03/30/using-fontawesome-5-in-qml.html

Я лично смешал его с этим решением для FontAwesome 4.7, что дало мне следующее:

Item {
    id: awesome

    property alias icons: variables

    readonly property FontLoader fontAwesomeRegular: FontLoader {
        source: "./fa-regular-400.ttf"
    }
    readonly property FontLoader fontAwesomeSolid: FontLoader {
        source: "./fa-solid-900.ttf"
    }
    readonly property FontLoader fontAwesomeBrands: FontLoader {
        source: "./fa-brands-400.ttf"
    }

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

    Awesome.Variables {
        id: variables
    }
}

И Awesome.Variables — это еще один файл, в котором я связал имена значков с кодом их символов. Вот отрывок:

QtObject {
    readonly property string fa_500px                               : "\uf26e"
    readonly property string fa_accessible_icon                     : "\uf368"
    readonly property string fa_accusoft                            : "\uf369"
    readonly property string fa_address_book                        : "\uf2b9"
    readonly property string fa_address_card                        : "\uf2bb"
}

Для того, чтобы его использовать, я загружаю его в свой корень Item, или в тот, где мне нужна такая иконка:

FontAwesome {
     id: awesome
}

Затем используйте его следующим образом:

Text{
    iconFont: awesome.solid
    text: awesome.icons.fa_arrow_up
}

Очевидно, сегодня это намного проще, чем когда были опубликованы предыдущие ответы.

Перейдите на домашнюю страницу FontAwesome, найдите нужный значок и загрузите его в формате SVG. Скажем, bars-solid.svg (значок меню-гамбургер).

В Qt Creator добавьте его, скажем, как qml.qrc/images/bars-solid.svg.

В разметке QML добавьте его как значение свойства, например, icon.source: "images/bars-solid.svg"

Если вам нужно решение только для QML для загрузки шрифта:

FontLoader {
    source: "fontawsome.ttf"
    Component.onCompleted: console.log(name)
}