Using Fonts Awesome in QML

by markg85


Today i read this post on the planet and it made me think: “can’t we use that already? It’s just a font..”.

It actually is quite easy to get it working. All you need is QML and the ttf font. This is what you need in QML:

And that’s it. That allows you to use the quite nice monochrome icons. You obviously need to change the location to wherever you downloaded fontawesome-webfont.ttf. Which you can be found in the download package from FontsAwesome.

There are a few things to know here. First, take a look at the available icons. You can’t use the names described in that page. But you can use their unicode key which you can find here. Now if you see an icon that you, for example the “icon-ok”, you type on this page (just using CTRL + F). There you will see that the unicode key for “icon-ok” is: “\f00c“. Putting exactly that in QML won’t work. Unicode keys have to be prefixed with “\u” so in this case you simply add a “u” after the slash and you’re done. The results is: “\uf00c“.

That’s it. Easy right :)



Somehow the “FontAwesome.ttf” in the root of the download package from their site isn’t working with the way i described above. You need to use the “fontsawesome-webfont.ttf” which you can find in the “font” folder of that same package.

Update 2

Since some people don’t like putting in unicode values in the text value, which i can perfectly understand, i made a translation array. Save the following as “fontawesome.js”

Now in QML you can use it as follows:

In my case i named the array “fontawesome.js” which i then include in QML as “FontAwesome”. Then in the text part you can use it with FontAresome.Icon.<the icon you want>.

When naming all the icons i went for camelcase with the first char as capital as well. I couldn’t do “icon-ok” because a “-” isn’t allowed in variable names in javascript. Good luck using it!