0

I am using Sencha Architect 3.0 for my extjs 5 application (not touch). I need to implement glyph using icomoon fonts. I am doing the following steps.

I have got icon set and its styles, already working in its demo.html page.

I have copied fonts folder and related styles in css folder under resources location, added css using Sencha Architect too.

locate correct font location in style.css also. for e.g. 

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

In style css, I have following classes for e.g.: 

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-2008:before {
    content: "\e600";
}

In Ext button i have set iconCls property as "icon-2008" and glyph as e600.

It shows me the glyph on button but with &#e600 in the background of button.

In Sencha CMD: sencha app refresh is just fine..

Please suggest what I am doing wrong, or what steps I should follow?

Thanks

Nitin Soni
  • 87
  • 1
  • 13

2 Answers2

0

  1. Include your icomoon related css into your app.json or index.html

  2. Include this line in your app.js or application.js Ext.setGlyphFontFamily('icomoon');

  3. In your button cfg, no need to mention iconCls for getting the glyphs. You can instead apply only glyph cfg.

glyph:0xe600 - (non-string value)

or

glyph:'600@icomoon' - (string value)

Deepak P
  • 367
  • 2
  • 4
  • hi thanks for the reply, i tried that also, but not showing unless I apply the iconCls attribute, only problem is it shows the background with . 0xe600 not working. – Nitin Soni Sep 16 '15 at 12:14
0

I finally made this working, all the steps i followed was correct, only what I was doing wrong is setting glyph code:

I used to set Glyph code as e600@icomoon, the correct representation should be 

glyph: xe600@icomoon

It should work then !!

Nitin Soni
  • 87
  • 1
  • 13