Using Custom Icons in Your Ext JS Apps

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. There are advantages to using icon fonts — they are vectors and therefore never lose quality; it’s easy to style icons without the use of Photoshop; and you make one page request to download all of the icons.

The glyph attribute is available on Ext JS buttons and panels. You can download a custom icon font from a site like: IcoMoon and implement the font in your style sheet. The value of the glyph attribute is the decimal code that maps to the unicode character which represents your icon. You add this attribute to the name of your custom font, and you’re good to go:

glyph: '115@MyIconFont',

A lot of Ext JS components extend from panel, but what if you want to implement icon fonts in other components that do not extend from Ext.panel.Panel or Ext.button.Button?

To answer this question, we can use the concepts that are actually happening under the hood:

A character is inserted before (or after) a certain DOM element. You can see an icon because this character is styled with a custom font (@font-face technique) that contains all of the icons.

Let’s try this ourselves:

1. With your browser’s dev tools, select the DOM element in which you want to implement an icon. Ideally put a CSS class on top of it (for example: .arrow), so you can easily refer to it from your Sass.
2. Download an icon font and map it to some character. (Let’s use the following character: > )

3. Implement the icon font in your Sass:

   @font-face {
           font-family: 'MyIconFont';
           src: url('../resources/fonts/Nouveau.eot');
           src: url('../resources/fonts/Nouveau.eot?#iefix') format('embedded-opentype'),
           url('../resources/fonts/Nouveau.woff') format('woff'),
           url('../resources/fonts/Nouveau.ttf') format('truetype'),
           url('../resources/fonts/Nouveau.svg#Nouveau') format('svg');
           font-weight: normal;
           font-style: normal;
   }
   

4. Alright, now comes the magic. In your Sass style sheet, write the following CSS rules:

   .arrow:before { 
           content: ">"; //the character mapped to an icon
           font-family: 'MyIconFont'; //the name of the icon font
   
           color: red; //set additional colors or dimensions...
           margin-right: 10px;
   
   }
   

The pseudo CSS selector :before will create the icon on the left side of the DOM element. The pseudo CSS selector :after will create the icon on the right side of the DOM element.

Now that you know how to use this technique, you can try it in any components, such as templates, dataviews, form fields, etc.

Want to learn more? Sencha is offering Advanced Ext JS Theming Training Live Online Jan 27-31. Take a look at the open courses located around the world or join an online training.