qooxdoo themes and more for qx.Desktop
JavaScript Other
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.



qooxdoo themes and more for qx.Desktop applications
Included in this package:

  • CLEAN - A flat qx.Desktop theme that promotes simplicity, open spaces, crisp edges and bright colors
  • FontAwesome for qx.Desktop - Font Icons for qooxdoo Desktop web applications
  • Demos - Clean theme with FontAwesome icons at the top



  • A theme for qx.Desktop applications
  • It's objective is to live up to it's name
  • Inspired by Semantic UI

FontAwesome for qx.Desktop

The fully integrated way of using Font Icons in your qx.Desktop application.

To use:

Step 1 Download sqv

Step 2 Download the latest FontAwesome zip file from the FontAwesome github site - http://fortawesome.github.io/Font-Awesome/

Step 3 Copy the contents of the FontAwesome "fonts" folder to the empty "sqv\source\resource\sqv\fonts\FontAwesome" folder

Step 4 Link sqv to your qx.Desktop project as a library by adding the following library entry to your app's config.json file:

"library" :
      "manifest" : "${QOOXDOO_PATH}/application/sqv/Manifest.json"

Step 5 Add the following lines of qooxdoo code to the start of the main function of your application (replace "sqv.theme.clean.Appearance|Decoration|Font" with the class names of the theme your app is currently using)

// Add font and text properties to the qx Image widget
qx.Class.include(qx.ui.basic.Image, sqv.ui.basic.MImage);
// Add the beforeContent property to the Decorator class
qx.Class.include(qx.ui.decoration.Decorator, sqv.ui.decoration.MBeforeContent);
// Add FontAwesome specific Appearance, Decoration and Font entries to the current theme 
qx.Theme.include(sqv.theme.clean.Appearance, sqv.fonticon.FontAwesome.Appearance);
qx.Theme.include(sqv.theme.clean.Decoration, sqv.fonticon.FontAwesome.Decoration);
qx.Theme.include(sqv.theme.clean.Font, sqv.fonticon.FontAwesome.Font);

Step 6 Add the following config entry (add-css) into sqv's config.json file, common entry (12/28/2017 - removed since this is an alternative to the qx @font implemention of font icons). This will bring in the necessary fontawesome css classes:

"common" :
  	"add-css" :
          "uri" : "resource/sqv/css/font-awesome.min.css"

Step 7 Run "generate.py source" in the command line to link the sqv project files to your application

Step 8 Create an image in your application and set its appearance property to "fa-search"

//stand alone icon example
var faiconsearch = new qx.ui.basic.Image().set({appearance:"fa-search"});

//example button with a fonticon
//the appearance "search-button" is an example appearance found in sqv.iconfont.FontAwesome.Appearance
var button = new qx.ui.form.Button("Icon Button", "");

Step 9 Run your project and see the results


Clean Theme (with FontAwesome icons) for qx.Desktop: http://sqville.com/examples/qxthemes/clean/index.html