Using Webfont icons in Sencha Touch


Introduction

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

ecommerce

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

Pre-requisite

  • 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.

Details

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

icomoon

icomoon_start

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.

icomoon_fonts

icomoon_fonts2

icomoon_fonts3

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

customize_fonticon

customize_font2

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

download_font

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

  • Create directory with name icomoon at following location:

<app-directory>/resources/sass/stylesheets/fonts/icomoon

  • 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

<app-directory>/resources/sass/stylesheets/fonts/icomoon

icomoon_dir

List of files inside icomoon font directory

icomoon_dirfiles

  • 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.

icomoon_code

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

xtype:'button',
iconCls:'truck',
text:'Shipping'

See below image for the sample view

icomoon_usage

Conclusion

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.

Tagged with: , , ,
Posted in Sencha Touch
One comment on “Using Webfont icons in Sencha Touch
  1. Alok Ranjan says:

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

    http://www.sencha.com/blog/using-custom-icons-in-your-ext-js-apps

    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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 689 other followers

%d bloggers like this: