Using Webfont icons in Sencha Touch


Need of custom icons i.e. business specific in any application is common. By default Sencha Touch comes with Pictos web font icons, but different application needs different icons and all of them may not have available in default Pictos which comes with Sencha Touch. To use custom icons i.e. application specific needs like e-commerce application may need icons like : cart, shipping, dollar etc.
This document helps developers who wants to use the custom webfont icons in Sencha Touch application.

Problem statement

To use custom webfont icons in Sencha Touch let us consider the scenario of e-Commerce application which requires icon sets like


In this article we will see how to use above icons in Sencha Touch application.


  • Sencha Touch development environment (Sencha cmd, Touch SDK etc)
  • Sample Sencha Touch application (To include custom icon and see the usage).
  • Working knowledge of Sencha Touch.


Following are the steps to achieve our requirement i.e. adding custom webfont icons to Sencha Touch application.

Step 1 : Generating custom fonts for icons

  • There are several free on-line tools which will help us in generating the fonts for the application, like IcoMoon
  • Using IcoMoon you can select the available fonts or import an SVG in order to create an application specific font package as like pictos.
  • To select fonts follow the steps:
    Open the IcoMoon site



Now select the font which you need in your application. Below image shows the selection of fonts as per our problem statement i.e. general fonts required in e-Commerce application.




If required you can change the name of the font as shown below :



Once you are done with the your required set of webfont icons, then download the font package


Step 2 : Add your font package to your Sencha Touch application

  • Create directory with name icomoon at following location:


  • Extract the downloaded package in tmp directory, inside you will find the directory with name fonts which contains following list of font files :
    • icomoon.eot
    • icomoon.svg
    • icomoon.ttf
    • icomoon.woff
  • Copy above 4 files to



List of files inside icomoon font directory


  • Include the custom font icons in app.scss file as shown below:
@include icon-font('wtccustomicons', inline-font-files(
 'icomoon/icomoon.woff', woff,
 'icomoon/icomoon.ttf', truetype,
 'icomoon/icomoon.svg', svg

@include icon("truck" , "\e600", "wtccustomicons");
@include icon("cart" , "\e601", "wtccustomicons");
@include icon("feedback" , "\e602", "wtccustomicons");
@include icon("support" , "\e603", "wtccustomicons");
@include icon("facebook" , "\e604", "wtccustomicons");
@include icon("dollar" , "\e605", "wtccustomicons");
@include icon("chat" , "\e606", "wtccustomicons");
@include icon("gift" , "\e607", "wtccustomicons");
@include icon("mail" , "\e608", "wtccustomicons");
@include icon("google-plus" , "\e609", "wtccustomicons");
@include icon("twitter" , "\e60a", "wtccustomicons");

Note :

  1. Text highlighted in blue colour will be used as value for iconCls property in your application view.
  2. Text highlighted in dark orange colour is code for font package which should be correct and you will get this when you about to download as shown in below image.


Step 3 : Usage

To use these icons in application view, create an view with set of buttons and use the iconCls property for each button as shown below


See below image for the sample view



As part of this article we saw that how to use custom web font icons in Sencha Touch application as per the requirement using free icons like IcoMoon and make our app look more user friendly and rich in usability.


Technical Lead at Walking Tree. Full-stack Mobile and Web developer with expertise in Sencha Ext JS/Sencha Touch/MEEN area. Involved in leading and developing products and solutions of high complexity.

Tagged with: , , ,
Posted in Sencha Touch
2 comments on “Using Webfont icons in Sencha Touch
  1. Really Helpful article.

  2. Alok Ranjan says:

    Thanks for the nice article Ranjit. I came across following article on Sencha’s blog:

    Above article (written for ExtJS) is definitely complementing your article.

    I see following statement in this article and I am wondering why we need to include all the font files?

    @include icon-font(‘wtccustomicons’, inline-font-files(
    ‘icomoon/icomoon.woff’, woff,
    ‘icomoon/icomoon.ttf’, truetype,
    ‘icomoon/icomoon.svg’, svg

    Have you included them by keeping the mobile website in perspective or all of them are required even while packaging for specific devices.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: