Question

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

Answer 1

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

下载字体并将其存储在项目目录中的某个位置。在示例中，它位于fonts文件夹中。
如果您在项目中使用.qrc文件，请将其添加到one of those。
我可以通过两种方式在QML中识别字体：FontLoader和QFontDatabase::addApplicationFont()。要使用QFontDatabase::addApplicationFont()，请在加载应用程序的QML之前添加this代码：
```
QFontDatabase fontDatabase;
if (fontDatabase.addApplicationFont(":/fonts/fontello.ttf") == -1)
    qWarning() << "Failed to load fontello.ttf";
```

使用text ToolButton { id: openButton text: "\uF115" // icon-folder-open-empty font.family: "fontello" onClicked: openDialog.open() }属性中的Unicode codes来显示您要显示的图标：

      // url string
  var url = "123456_https://example.com"
// seperate url by "_" and provides 123456 and https://example.com in urlArray
  let urlArray = url.components(separatedBy: "_")
// now to be safe
    if(urlArray.count == 2){
        // here you get your desired string
        let myUrl = urlArray[1]

    }

Answer 2

这里有一个解决方案： https://martin.rpdev.net/2018/03/30/using-fontawesome-5-in-qml.html

我个人将其与this solution for 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
}

Answer 3

今天显然比发布以前的答案要容易得多。

转到FontAwesome主页，搜索所需的图标，然后以SVG格式下载。例如， bars-solid.svg （汉堡菜单图标）。

在Qt Creator中，将其添加为例如 qml.qrc / images / bars-solid.svg 。

在QML标记中，将其添加为属性值，例如 icon.source：“ images / bars-solid.svg”

Answer 4

如果您想要仅使用 QML 的解决方案来加载字体：

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

如何在QML中使用Font Awesome

4 个答案: