font-awesome-qml provides the Font Awesome web fonts to Qt Quick/QML engine.
-
Add the file
FontAwesome.qmlandcontrolsfolder to your project. -
If necessary import FontAwesome types
import "controls" as Awesome- Using Font Awesome:
// main.qml
import "controls" as Awesome
Window {
FontAwesome {
id: awesome
// resource: "qrc:///resource/fontawesome-webfont.ttf"
resource: "http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/fonts/fontawesome-webfont.ttf"
}
Text {
id: text
font.pointSize: 180
font.family: awesome.family
text: awesome.loaded ? awesome.icons.fa_money : ""
}
Awesome.Text {
icon: awesome.icons.fa_money
text: "fa_money"
}
Awesome.Button {
icon: awesome.icons.fa_money
text: "fa_money"
}
}// Alias to acess individual font-awesome variables (icons)
property alias icons:
// Property to chech if the Font Loader it is ready, if it is using the remote
// font-awesome CDN it is necessary to check and wait for to be true.
property alias loaded: false
// Set font-awesome Font Loader source
property alias resource
// Return font family name
readonly property string family: "FontAwesome"I needed to replace the "-" character, from Font Awesome icons name, to "_", because QML/JS doesn't accept minus character at variables name.
You can see all availables icons at controls/Variables.qml file.
Qt Version : 5.9
Font Awesome : 4.7.0
Font Awesome - The iconic font and CSS toolkit.
Qt Project - True cross-platform framework.
"Using Fonts Awesome in QML" by markg85.
Created by Ricardo do Valle.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Added some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent