Using Fonts Awesome in QML

10 Thoughts on “Using Fonts Awesome in QML”

1. framp on November 21, 2012 at 3:39 AM said:

   We can also get the glyphs directly from the svg font and use them

   glyph unicode=”” d=”M0 732.5q0 33.5 23 55.5l174 175q23 23 56.5 22.5t55.5 -22.5l365 -365q23 -23 56.5 -23t55.5 23l746 745q23 23 56.5 23t56.5 -23l174 -174q23 -23 22.5 -56.5t-22.5 -55.5l-910 -910q-23 -23 -62.5 -39t-72.5 -16h-88q-35 0 -75 16.5t-62 38.5l-526 529 q-23 23 -23 56.5z”

   Reply↓
2. ZeD on November 21, 2012 at 6:48 AM said:

   Hi.
   But… how do you deal with the fact that, a month from now, you will forget what the hell the character ‘\uf00c’ means?

   Reply↓
3. smoggy on November 21, 2012 at 10:28 AM said:

   /// Does not work :(

   import QtQuick 2.0

   Rectangle {
   width: 320; height: 480; color: “grey”

   ListModel{
   id:id_elements
   }

   function dec2hex(i)
   {
   var result = “0000″;
   if (i >= 0 && i = 16 && i = 256 && i = 4096 && i <= 65535) { result = i.toString(16); }
   result = result.substring(2,4);

   return result
   }
   Component.onCompleted: {
   var sym = "\f0";
   for (var j=0;j <= 234; j++){
   id_elements.append({"value":"f0"+dec2hex(j)});
   }
   id_elements.append({"value":"f200"});
   }
   FontLoader{id:id_font_loader;source: "FontAwesome.ttf"}
   GridView {
   anchors.fill: parent
   model: id_elements

   delegate: Rectangle{
   width:40//Math.max(childrenRect.width,18)
   height:40//Math.max(childrenRect.height,18)
   border.width: 1
   border.color:"black"
   color:"lightgrey"
   Text {
   id:id_text
   anchors.centerIn: parent
   text: "\u"+value
   font.family: id_font_loader.name
   font.pixelSize: 30
   color: "black"
   }
   Component.onCompleted: print(value)
   }
   }
   }

   Reply↓
4. jstaniek on November 21, 2012 at 10:43 AM said:

   Code like the one presented can work and while quite large it’s still smaller than the spaghetti of CSS/HTML hacks used on the web. This approach is apparently used by Jeremy in his app (https://qtconference.kdab.com/node/23#Serving_QML). But of course the goal was to have easy to use QML component, with icons accessible by name, and it would be best to have option for using the freedesktop.org naming.

   Also I am unsure of performance penalty, when using font loader directly in every UI element that needs an icon; this has to be benchmarked.

   Reply↓
   • markg85 on November 21, 2012 at 1:54 PM said:

     I don’t think you need to worry about the performance. It are just “fonts” after all. Fonts (as in the stuff in Qt that loads the fonts) is quite optimized for performance. So i really don’t think you’d want to have a layer in between to “optimize” it further. First try to figure out “if” it even needs optimizing.

     As for calling it by name. You can just put the unicode values in javascript variables.. That would make it readable but would also add a quite big list of variables.

     Reply↓
5. smoggy on November 21, 2012 at 12:20 PM said:

   does this work in QtQuick 2.0 ?

   Reply↓
   • markg85 on November 21, 2012 at 1:55 PM said:

     It should. I’m not using anything special in my example so the example should just work (if you change the font path obviously)

     Reply↓
6. markg85 on November 21, 2012 at 2:03 PM said:

   Heads up, be sure to read the update in my post. That will likely also fix the issue “smoggy” has :)

   Reply↓
7. markg85 on November 21, 2012 at 4:12 PM said:

   Second heads up. Just read the second update in the main post.

   Reply↓
8. smoggy on November 21, 2012 at 7:40 PM said:

   mark g. number 85 :) thanks for the update, it worked fine for me with s/QtQuick 1.1/QtQuick 2.0/g
   My example still does not work, dunno why; maybe the concat of \uf0XX does not work properly.
   I’ll just use your JS library when i need any character.

   Reply↓