[Per]

The following QML works fine in mac and android but has 2 problems in ios:

1) In iOS 9.3.3 the icons in the column are visible, but the icons in the AppListView appear as horizontal B&W lines. In mac 10.11 and android 4.4 all icons are visible.
How do I show icons from fontawesome 4.6.3 (or another custom font) in AppListView on iOS?

2) In iOS if you click a row then the app crashes; in mac and android the DetailPage correctly shows the icon, text and detailtext.
Why does iOS crash?

 

I am using Qt 5.6.1 and Vplay 2.8.5

Here is the MainPage.qml

import Felgo 3.0
import QtQuick 2.0
App {
    NavigationStack {
        MasterPage {}
    }
}

Here is the MasterPage.qml

import Felgo 3.0
import QtQuick 2.0

Page {
    id: masterPage
    title: qsTr("Master")

    FontLoader { id: fontawesome; source: "../assets/fontawesome-webfont.ttf" }

    property string bluetooth: "\uf293" // not present in Vplay's older fontawesome

        Column { anchors.fill: parent
                 AppText { text: "ICONS" }
                AppText { text: IconType.envelope; font.family: fontawesome.name }
                AppText { text: IconType.calendar; font.family: fontawesome.name }
                AppText { text: IconType.paw; font.family: fontawesome.name }
                AppText { text: bluetooth; font.family: fontawesome.name }
                AppText { text: "APPLISTVIEW" }

           AppListView {
            id: listview

            model: [{ text: "Envelope", detailText: "Fruit", icon: IconType.envelope },
            { text: "Calendar", detailText: "Fruit", icon: IconType.calendar },
            { text: "Paw", detailText: "Fruit", icon: IconType.paw }]

          delegate: SimpleRow {
            onSelected: {
                masterPage.navigationStack.popAllExceptFirstAndPush(Qt.resolvedUrl("DetailPage.qml"), { contentText: item.text, contentDetail: item.detailText, contentIcon: item.icon })
            }
        }


  }

        }

}

Here is the DetailPage.qml

import Felgo 3.0
import QtQuick 2.0

Page {
    id: detailPage
    title: qsTr("Detail")
    property alias contentText: text.text
    property alias contentDetail: detail.text
    property alias contentIcon: icon.text

    FontLoader { id: fontawesome; source: "../assets/fontawesome-webfont.ttf" }

    Column {
        anchors.centerIn: parent
        Text { id: icon; text: modelData.icon; color: "blue"; font.family: fontawesome.name }
        AppText { id: text; text: modelData.text }
        AppText { id: detail; text: modelData.detailText; color: "gray"; font.italic: true }
    }
}

 

[GüntherFelgo Team]

Hi Per!
It is not possible to register the same font twice on the system, so the loading of your FontAwesome version collides with the version Felgo tries to load internally. As a result either the Felgo or the custom font is loaded.

On iOS the custom font is loaded and the Felgo font fails to load, which causes some internal issues.

To avoid this problem, you can replace the default font with the Theme:

App {
  onInitTheme: {
    Theme.iconFont = fontawesome // replaces the default icon font
  }

  FontLoader { id: fontawesome; source: "../assets/fontawesome-webfont.ttf" }

  // ...
}

Please also remove any additional FontLoader definitions for the same font in other QML files of the project.

On Android, I noticed that your custom font fails to load and the FontAwesome version loaded by Felgo is used (the new bluetooth icon does not work then).
This still happens if you replace the font in the Theme, we will have a fix for that in one of the next updates, so please use the above solution, which will soon work on all platforms.

Best,
Günther

 

[Per]

Thanks! As a workaround I am using a custom font from http://www.fontastic.me containing my needed fontawesome icons. This works on mac, ios and android.

Even better would be a more recent fontawesome font included in Vplay 🙂

           FontLoader {
                id: fontastic
                source: "../assets/untitled-font-1.ttf"
            }
...
AppText { text: "abcd"; font.family: fontastic.name } // custom font containing 4 icons