如何在 QML 中使用 Font Awesome

Question

有谁知道如何在 QML 中使用 Font Awesome？我找不到任何文档或任何有关如何在 QML 中使用 Font Awesome 的信息。

Answer 1

我喜欢做的是使用fontello创建一组最小的图标，而不是从 FontAwesome 下载整个图标集。使用文本编辑器示例作为参考：

1. 下载字体并将其存储在项目目录中的某个位置。在示例中，它位于fonts文件夹中。
2. 如果您在项目中使用 .qrc 文件，请将其添加到其中一个.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()
   }
   

Answer 2

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