Using Font Icons in Ext - FontAwesome

Published on: April 28, 2014

This is an archived post from the ExtJS era — the code may be obsolete, but the principles often still apply.

What is a Font Icon?

Every application or operating system needs icons, small images symbolizing concepts or actions that are easier to recognize and locate than written texts. They used to be 16x16 pixels but with increased screen resolutions like retina displays we need much bigger images: 64x64, 256x256 or even higher. The 'ole good 16x16 just do not look good anymore. The idea of font icon is simple: fonts are not bitmap images but vector shapes so if we draw a shape and assign it to a character in a font we get scalable and resolution independent icon that looks good at any size. So that's font icon.

What is an Icon Font?

Sure, one icon is not enough, and a couple of special glyphs in standard fonts as Arial also won’t do designers and developers put together collections of useful shapes, icons into specialized fonts, icon fonts. If you google for "icon font" you find many of them, they are increasingly popular. Here is the list of a few of them:

I'll discuss FontAwesome in this post.

FontAwesome

Take a look at all icons at FontAwesome site. There are about 370 icons in 8 categories, the selection that should be enough for a majority of applications. Each icon has a symbolic name that is CSS class in fact. If you click on an icon, you see the icon details. The most important information is:

Unicode number, e.g. f14e for fa-compass
HTML markup to show an icon, e.g.

The stylesheet that contains CSS classes is also provided either for download or hosted on CDN:

You only need to include the above stylesheet in the head of the page and then place the markup of the icon wherever you want to show it, like here .

Using FontAwesome in Ext application

The aforementioned way is fine for showing icons in text but in Ext we want icons in headers, buttons, menu items, etc. How to go about that? Fortunately, it's very easy. Many components have configuration option glyph that takes unicode of the icon plus the optional font family name. That is enough to show the font icon (besides including the font stylesheet in the head). Button configuration would then look like this:

Panel like this:

Nobody likes too much typing of font name in every glyph so we would rather call

early in ourc app (init or launch method of Application). The we would then configure our button and panel like this:

Important: Mind that the type of glyph in the above code is number, not string. The global glyph font family is ignored if glyph type is string.

14 comments

Joel WatsonAugust 9, 2014archive

Thanks for the write up, Saki. One note. I could not get this to work by putting setGlyphFontFamily(...) in launch(). It only worked in init(). I was testing this in Ext JS 5.0.1. Also, if you're interested in updating it, the new cdn link for FA is: //maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css Thanks again!

SakiAugust 11, 2014archive

Yes, it can be that something changed in Ext 5. Anyway, I set the glyph family even earlier: at the beginning of app.js before Ext.application call. Link updated. Cheers.

Lucian CapdefierAugust 23, 2014archive

EXT JS 5.0.1: 1. Reference the css in index.html file; 2. Then simply use the iconCls property of an button item, like the following example: { xtype: 'button', id: 'b_grid_edit_id', iconCls: 'fa fa-pencil fa-lg', text: 'Edit' } Hope this helps!

SakiAugust 27, 2014archive
Yes, thanks god it works fine in Ext 5.0.1. But the icon defined this way is misaligned in Ext 5.0.0.

Ian LimNovember 9, 2014archive

How to change the icon color in Ext 5.0.1?

JHOSIMAR AGUACIADecember 12, 2014archive

I don't understand :( in which folder I must to put the font-awesome-4.2.0.Zip

SakiDecember 15, 2014archive
You do not download font zip file, you only add css file link to your index.html or app.json
1. JHOSIMAR AGUACIADecember 30, 2014archive
  Sorry, but I'm kinda new to this. Can you explain how I can link this in app.json thank you
2. SakiJanuary 7, 2015archive
  You can add path to Font Awesome to app.json this way: <pre class="lang:css nums:false"> "css": [ { "path": "bootstrap.css", "bootstrap": true }, { "path": "http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css", "bootstrap": true } ], </pre>

Kristian AskDecember 27, 2014archive

I'm trying to set the font to a node using iconCls on my nodes in 5.0.1 but it's not working. Can I use fonts for icons on tree nodes?

SakiDecember 29, 2014archive
Yes, you can, however, you might need to override or extend TreeColumn because you may need, or it would be more convenient to have, changed HTML markup of nodes. Maybe not different tags but added or changed HTML properties of the existing tags. That is how I've done the navigation tree at <a target="_top" href="/ext-examples" rel="nofollow">the examples page</a>.
1. Kristian AskDecember 30, 2014archive
  What method do I override or what method do I overload? I can't check your source of the examples page...
2. Kristian AskDecember 31, 2014archive
  Nevermind, Saki, I just modified the TreeColumn template. The tree is an isolated view where the reuse would stop so that's enough for now. Thanks!
3. SakiJanuary 7, 2015archive
  I've extended <code>Ext.tree.Column</code> and I've overridden <code>cellTpl</code> to recognize additional fields such as <code>iconColor</code>, etc. Then I use <code>columns</code> config option of the tree panel specifying the extension's xtype.

Comments are closed on archived posts.