Huge Icons ‐ Icon Font setup - sqville/ville.Embed GitHub Wiki

I was able to add Huge Icon's free icon font to my testapp qooxdoo desktop app by following these steps:

1. Download all necessary font files from Huge Icon's cdn site: https://cdn.hugeicons.com/font/hgi-stroke-rounded.ttf (as an example), and add them to my project's resource/fonts folder.

2. Generate the glyph mapping json

sqville source % cd resource/fonts 
sqville fonts % qx export-glyphs hgi-stroke-rounded.ttf hgistrokerounded.json

3. Update my app's Manifest.json file:

"provides" :
  {
    "namespace"   : "testapp",
    "encoding"    : "utf-8",
    "class"       : "source/class",
    "resource"    : "source/resource",
    "translation" : "source/translation",
    "fonts": {
      "HgiStrokeRounded": {
        "family": [
          "hgi-stroke-rounded"
        ],
        "defaultSize": 30,
        "comparisonString": "e1feef39",
        "css": [
          "https://cdn.hugeicons.com/font/hgi-stroke-rounded.css"
        ],
        "fontFaces": [
          {
            "fontFamily": "hgi-stroke-rounded",
            "paths": [
              "fonts/hgi-stroke-rounded.ttf",
              "fonts/hgi-stroke-rounded.eot",
              "fonts/hgi-stroke-rounded.woff2",
              "fonts/hgi-stroke-rounded.woff"
            ]
          }
        ],
        "glyphs": "fonts/hgistrokerounded.json"
      }
    }
  },

4. Add @usefont hint to my Application.js file

/**
 * This is the main application class of "testapp"
 *
 * @asset(testapp/*)
 * @usefont(HgiStrokeRounded)
 */

5. Use it in a widget

let atom = new qx.ui.basic.Atom("Look, I'm a font icon", "@HgiStrokeRounded/abacus/50");
this.getRoot().add(atom, {left: 200, top: 10});