How to add a new icons font like FontAwesome?

Question

I've been using Sencha Touch for a long time and now I'm trying Sencha Architect. I need to include FontAwesome to use more icons in my buttons. The problem is that I don't know where I have to write:

@include icon-font('Awesome', inline-font-files('awesome/fontawesome-webfont.woff', woff, 'awesome/fontawesome-webfont.ttf', truetype,'awesome/fontawesome-webfont.svg', svg));

Besides, I'm not sure which is the folder where the fonts has to be located. If I put the fonts in resources/scss/stylesheets/fonts/awesome, the compiler throws some errors. If I put the fonts in Library/Application Support/Sencha/Sencha Architect 3.0/extracted/touch23-compile/themes/fonts, it works, but I don't think this is the best solution.

Does anybody know the best way to include new fonts to a Sencha Architect project?

Thank you all.

Anand Gupta Anand Gupta · Accepted Answer · 2014-02-12T11:10:38

In 'resources->saas->stylesheets->fonts->fontAwesome' put all the .eot, .svg, .ttf and .woff files. In your app.scss file include it

// Custom font
@include icon-font('CustomIcons', inline-font-files(
'fontAwesome/fontawesome-webfont.woff', woff,
'fontAwesome/fontawesome-webfont.ttf', truetype,
'fontAwesome/fontawesome-webfont.svg', svg,
'fontAwesome/fontawesome-webfont.eot', eot
));

after

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

and include icons likes @include icon("settings", '\f085', "CustomIcons"); Now 'settings' class can be used in iconCls to show the http://fortawesome.github.io/Font-Awesome/icon/cogs/ icon. N.B. Don't forget to compile the scss file.

How to add a new icons font like FontAwesome?

3 Answers