如何在QML中使用Font Awesome

Question

如何在QML中使用Font Awesome

qtqmlfont-awesome

7

有人知道如何在QML中使用Font Awesome吗？我找不到任何文件或信息来介绍如何在QML中使用Font Awesome。

- NTMS

4个回答

5

这里有一个解决方案： 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
}

- SThor

1

我已经创建了一个脚本来自动化图标字体的创建，并生成一个遵循答案中提到的模式的QML组件。https://github.com/mnesarco/ff-batch - mnesarco

4

相较于之前发布的答案，现在要容易得多。

前往FontAwesome首页，搜索你需要的图标，并以SVG格式下载。比如，bars-solid.svg（汉堡菜单图标）。

在Qt Creator中添加它，命名为qml.qrc/images/bars-solid.svg。

在QML标记中，将其作为一个属性值添加，命名为icon.source: "images/bars-solid.svg"

- user240515

0

如果你想要一个仅基于QML的解决方案来加载字体：

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

- Khushal Khan Liwal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mitch · Accepted Answer

我喜欢使用fontello来创建一个最小化的图标集，而不是下载整个FontAwesome图标集。以texteditor示例为参考：

Download the font and store it somewhere in your project directory. In the example, it's in the fonts folder.
If you're using .qrc files in your project, add it to one of those.
There are two ways that I can think of to have the font recognised in your QML: FontLoader and QFontDatabase::addApplicationFont(). To use QFontDatabase::addApplicationFont(), add this code before loading your application's QML:
```
QFontDatabase fontDatabase;
if (fontDatabase.addApplicationFont(":/fonts/fontello.ttf") == -1)
    qWarning() << "Failed to load fontello.ttf";
```

Use the Unicode codes in the text property of whatever item you want to display the icon in:

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