Icon fonts

Web Application to Church Management

Icon fonts

May 21, 2014 Component Free Products 0

It allows creation of icons from sources.

The advantage is to treat the icon as a source, so you have all the resources that there is a source and can change the icon size for font-size property, change the color by color attribute and so on, that is, need not have multiple icons of various sizes and colors in your project, you customize and makes the source of a label for example.


– Visit the site IcoMoon. There are several others, but I think this very good:

– Click in the App, then Start the App:

– Select the desired icon and click Font:

– Write down the code for each icon and the name of the source and download:

– Visit the site Unicode character table:

– Look for the code corresponding to the icon, you noted:

– Check that the number for this symbol:

– After this is done, paste the fonts (which is the downloaded.zip file IcoMoon site) to the resources folder of your project;

– Copy and paste the content that is in the sass/etc/all.scss the example project, which informs the way the font files;

– If you want to define new CSS rules for your icons inform sass in your file, as was done in the example design, sass/file/src/view/Viewport.scss to the buttons with colorful icons;

– Inform Ext you want to apply the icomoon source (source name written down at the time of download from the site IconMoon) the glyph if its components from the code set on the init of the app/Application.js the sample project;

– Do the build of your application and its sass files (sencha app build);

– After that you can set in the glyph of your button, for example, the code for its icon. For example, home icon, in E600 was defined as a font created. The number corresponding to it according to the Unicode site is 58880, then for you to display in your home icon button, enter: glyph: 58880 ;

– For convenience, a mapping was created in the sample project, which is set in the icons.js, which aims to name the icons, so that, when used, be called by its name (icons.home, for example);

Before running the project, has the Sencha Cmd installed, browse the terminal to the project folder and run the following command: sencha app build


Leave a Reply

Your email address will not be published. Required fields are marked *