View Full Version : Custom icon fonts as glyphs with sencha command

24 Oct 2013, 9:43 AM
What is the correct way of including and setting up icons fonts for an app using sencha command (build)?

The document for Introducing Ext Js 4.2 (http://www.sencha.com/blog/introducing-ext-js-4-2) mentiones the use of 'glyph', and this is also used in the example for Icon Tabs in the kitchen sink (http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#icon-tabs). But i cannot find any example of how to actually set this up.

Currently i have included a separate css-file defining the icon fonts and refer to them in the components like this:

xtype: 'button',
text: 'Action',
glyph: 'xe0da@MyCustomFont'

I figure i have to convert the separate css-file to a sass file, but where should i include it? What is the recommended method?

Thanks in advance for any help.

28 Oct 2013, 12:29 PM
You can use SASS like this (this is from the fiddle project):

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

I created a package and used the sass/etc/all.scss for this.

29 Oct 2013, 7:02 AM
Thanks for that Mitchell, works fine.

I have a follow up-question:
How/where should one set default sizes for these glyphs to have them scale nicely, like in the 'basic-buttons' example in the Kitchen Sink (http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#basic-buttons) .

In our app they're kindof too small, just as if they should be 5-10% larger across the line.
Would be awesome if we could have a look at the full application source for the kitchen sink.