Custom font icons in ExtJS 6

[ajruli.semir]

Is there any best practice how to add custom font icons in ExtJS 6?

[jsakalos]

Ext JS 6 Triton Theme already uses Font Awesome that is one of the most complete font icons collections.

For other themes:

1. add link to css (FontAwesome or other) to app.json
2. copy font files under resources directory
3. call setGlyphFontFamily early in the app startup

See also http://extjs.eu/using-font-icons-in-ext-fontawesome/

[ajruli.semir]

Thank you for your answer.

I know that Font Awesome are already integrated in Triton theme. I don't want to use glyph codes. I want to use iconCls property.

In sencha touch I do like this:

Create directory:

<app-directory>/resources/sass/stylesheets/fonts/icomoon

Include the custom font icons in app.scss file as shown below

@include icon-font('customicons', inline-font-files( 
     'icomoon/icomoon.woff', woff, 
     'icomoon/icomoon.ttf', truetype, 
     'icomoon/icomoon.svg', svg)
);

@include icon("truck" , "\e600", "customicons");
@include icon("cart" , "\e601", "customicons");
@include icon("feedback" , "\e602", "customicons");

But when I use in extjs6 this mixin it thoughs an error in CMD console. It doesn't exist!

[binalfew]

Is there any best practice how to add custom font icons in ExtJS 6?

I think you should follow what saki suggested. I have done this today. If you go to any font icon providers like https://icomoon.io, they give you options to select the icons you want and download as a font. After that, copy the contents of the download into the resources directory and refer that folder in app.json in the css section as

"path": "path/to/the/font/files/in/the/resources/directory"

and you are done. You can now reference any icon by its css class name rather than the code as you mentioned.

[thecap]

Isn't there any way to use the Charactercodes together with an own iconFont-File?

I built a fontfile at icoMoon and referenced it in the Component.scss like this:

@font-face {
  font-family: 'iconFont';
  src:url('//resourc[...]

And then I wanted to use the config-param 'glyph' as the documentation mentions:

Alternatively, this config option accepts a string with the charCode and font-family separated by the @ symbol. For example '[email protected] Font Family'.

But it seems not to work.

[eric.markunas]

There was never another answer to this thread, and the provided directions are not clear enough or too specific to FontAwesome to reproduce. How would I import a custom font (for example icomoon) AND use it in ExtJS 6.


What's required to use iconCls as opposed to using the glyph config? Is there a difference?

[ebett]

We're currently using our custom font icons.
Follow this steps
- Create svg images
- Use Grunt and webfont plugin for compile svg images to a font files
- Create a sencha code package
- Put the fonts in resources folder
- Put css icons classes in the sass file.
Note: Use $my-font-path: get-resource-path('fonts', $pool: 'shared');
- Import package in app.json

Regards!

[sirwesley]

I created my own font package with "icofont" using fontawesome as a guide. Here's what I created and works well:

https://github.com/sirwesley/extjs-icofont