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.
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 :
- 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");
- Text highlighted in blue colour will be used as value for iconCls property in your application view.
- 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
xtype:'button', iconCls:'truck', text:'Shipping'
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.