" Hi my name is Lee.
I'm a writer an engineer a trainer and a public speaker.
I create fixes & I fix headaches...
Welcome to my dev blog."

Blog

Reverse Engineer the Sencha FontAwesome package to get an overview of icons.

Posted on in 

Ext JS 6, ships with a copy of the font-awesome icon font. Remember the Wingdings Font from back in the days? Icon Fonts are somehow similar like that. An icon font is a (fontface) font, and every (unicode) character maps to an icon. Icon fonts are great, because they are all vectors. Therefore you can easily change the color or size, and they will always have best quality. Perfect on retina displays. You no longer need to open Photoshop to modify the icons. Because it’s text, you can add shades, change colors, backgrounds and sizes all with CSS code. (You just can’t make 3D icons / multi color icons, because it’s text.)*. Also, icon fonts won’t spam your screenreaders.

In Ext JS 6, font-awesome icon font is a code package, which is included in the SDK, and free to use. It’s version 4.4. which includes 585 vector icons! You can use font packages, by enabling font awesome in your app.json file: (when you generated the application with Sencha Cmd, this should be already there.) "requires": [ "font-awesome" ],

Now you can start using the font, by adding the iconCls property to your component. For example:

1
{ xtype: ‘button’, iconCls: ‘x-fa fa-globe’ }

The iconCls is supported on: buttons, panel titles, menu’s, tree node items, grid actions, separators and ux status bars. (That probably covers most of the places you want an icon for, but if you want icons in for example templates, you can use the below trick as well, and set icons manually.) The big question is, how do I know, which icons are included out of the box? The easy answer is, you can use the font awesome cheatsheet: http://fontawesome.io/cheatsheet/ Everything 4.4 and below will be available. But the best answer is, you can reverse engineer this from the package yourself! Browse to: myapp/ext/packages/font-awesome/sass/etc/

Let’s first dive into: _variables.scss. This Sass file, shows the font version number, and the CSS prefix. For Ext JS 6.2 this is:

1
2
$fa-version: "4.4.0" !default; 
$fa-css-prefix: fa !default;

The _variables.scss file sets all the used variable names for every icon. However, we still don’t know how the icon will look like. Therefore, open your browser and use the Icomoon font app: https://icomoon.io/app/#/select Click the Import Font button. Now browse to myapp/ext/packages/font-awesome/resources/fonts/ and select: fontawesome-webfont.svg

This will import all the font-awesome icons, which are in Ext JS. Within the Icomoon app, select all the font-awesome icons. (Select the first, hold shift and select the last.) Then press the Generate Font button in the bottom of the app. You will now see an overview of all the icons with its used unicode. (If you want, you can download the font here, so it also saves an HTML file, with this overview.) Ok, so now we know how the fonts look like, and what it’s unicode is. I could now, look into this list, pick the icon that I want. Copy the unicode, and lookup the variable name in _variables.scss. For example, the icon with the double music notes, has the title: uniF001, so unicode: f001, which matches Sass variable name: $fa-var-music. Once you know the variable name, copy it and open _icons.scss. Search in this file for the variable name, and it will reveal to you. For the $fa-var-music variable, it contains this Sass line:

1
2
3
.#{$fa-css-prefix}-music:before { 
content: $fa-var-music !important;
}

Which will be compiled as the following CSS:

1
2
3
.fa-music:before { 
content: $fa-var-music !important;
}

As you can see the CSS class fa-music, will create another node in your HTML DOM, before the element that has this CSS class, with the content that contains the unicode of the music note icon. iconCls, just adds this node in the DOM tree. How does it know how to style the icon (for example, the color and its font-size?) That’s what the class .x-fa is for. Note: The x-fa class should be used in Ext JS applications instead of fa which is the class you get if you download the font package from font-awesome.com itself. The fa class sets some properties that may collide with the Sencha theme properties, whereas x-fa sets only the font-family:

1
2
3
.#{$prefix}fa:before { 
font-family: FontAwesome !important;
}

The default font-size and colors are set in _variables.scss:

1
2
3
4
5
6
7
$fa-font-path: "../fonts" !default;
$fa-font-size-base: 14px !default;
$fa-line-height-base: 1 !default;
$fa-version: "4.4.0" !default;
$fa-border-color: #eee !default;
$fa-inverse: #fff !default;
$fa-li-width: (30em / 14) !default;

For the rest it’s up to you to style the icons as you like. You can do this in your theme package or app stylesheet. *The Wingdings font was developed by Microsoft in 1990, it is actually a dingbat (a printer character used for typesetting) font. None of the characters were mapped to unicode back then, and is only available on (legacy) Microsoft platforms, therefore you should not use Wingdings for the web.

Webinar: Secrets to Building a Great Looking Universal App

Posted on in 

A while ago I recorded this great webinar for Sencha. Just in case you missed it; you can watch it back!

Read More

How to Create a Dark Ext JS Theme (part 2)

Posted on in 

I’ve been showing you how to develop a fancy dark theme, which kind of looks like Spotify. In Part 1 of the article, you learned about Fashion, Sencha Inspector, Themes, and variables. In Part 2, I’ll focus on more advanced concepts including: making unique components with Ext JS UIs, CSS overrides, and how to incorporate custom fonts or icons.

Read More

How to Create a Dark Ext JS Theme (part 1)

Posted on in 

Every now and then, I demo my Spotifinder Ext JS app. It’s a really cool app that connects to LastFm and Spotify. I created it, to demo Ext JS concepts in my training classes. It also shows off the great theming capabilities in Ext JS.

This year, I presented advanced theming at SenchaCon and I received lots of questions about how I created the Spotifinder app theme. So I decided to write a tutorial on how to create a really cool, good looking dark theme.

Read More

How to Style Apps with Fashion in Ext JS 6

Posted on in 

In Ext JS 6, one of the big new features is the merged framework. With a single codebase, you can create the best performing applications, with the ideal experience on each device. It also includes a new way to style your apps.

In this article, I will focus on Sencha Fashion – what it is and what you can do with it. Keep an eye out for my upcoming tutorials that will show you how to create a great looking dark theme.

Read More

Re-skinning Your Apps Just Got Easier with Sencha Architect 3

Posted on in 

Ever had to reskin UI components to match a visual design or brand standard? The new Themes feature in Architect 3 makes changing the look and feel of your app easier than ever.

Read More

Creating Theme-Specific Overrides in Ext JS

Posted on in 

Ext JS provides a number of functions that make it simple to create and work with classes. It also provides a series of functions to extend or override existing JavaScript classes. This means you can add behaviors and create your own classes, or override the behavior of some functions. In this article, we will show you how to use theme-specific class overrides.

Read More

Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 2)

Posted on in 

In this three-part Sencha Touch tutorial, you will build the Do I need my Umbrella app, a simple utility app that loads weather information from a web service — worldweatheronline.com. Based on weather codes, this app can predict if you need your umbrella or not.

Read More

Using Custom Icons in Your Ext JS Apps

Posted on in 

Do you like the glyph attribute in Ext JS 4.2 as much as I do? With glyphs, you can implement an icon that is created from a font.

Read More

Generate a theme with Sencha Cmd

Posted on in 

This guide will teach you how to generate a Sencha Theme with Sencha CMD, to start theming with Sass.

Read More