Results 1 to 8 of 8

Thread: Custom font icons in ExtJS 6

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    6
    Vote Rating
    1
      0  

    Default Answered: Custom font icons in ExtJS 6

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

  2. Quote Originally Posted by ajruli.semir View Post
    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
    Code:
    "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.

  3. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512
    Vote Rating
    403
      0  

    Default

    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/
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    6
    Vote Rating
    1
      1  

    Default

    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:
    Code:
    <app-directory>/resources/sass/stylesheets/fonts/icomoon
    Include the custom font icons in app.scss file as shown below

    Code:
    @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!

  5. #4
    Sencha User
    Join Date
    Feb 2010
    Posts
    2
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by ajruli.semir View Post
    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
    Code:
    "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.

  6. #5
    Sencha Premium Member
    Join Date
    Aug 2014
    Posts
    13
    Answers
    2
    Vote Rating
    1
      1  

    Default

    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:
    Code:
    @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 '65@My Font Family'.
    But it seems not to work.

  7. #6
    Sencha Premium Member
    Join Date
    Sep 2015
    Location
    San Francisco, CA
    Posts
    2
    Vote Rating
    0
      0  

    Default

    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?

  8. #7
    Sencha Premium Member ebett's Avatar
    Join Date
    Nov 2010
    Location
    Argentina
    Posts
    27
    Answers
    1
    Vote Rating
    0
      0  

    Default

    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!

  9. #8
    Sencha Premium Member
    Join Date
    Mar 2015
    Location
    Raleigh, NC
    Posts
    47
    Answers
    1
    Vote Rating
    4
      0  

    Default

    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

Similar Threads

  1. Icons font
    By fabio.policeno in forum Ext:User Extensions and Plugins
    Replies: 4
    Last Post: 17 Feb 2015, 11:41 AM
  2. How to add a new icons font like FontAwesome?
    By WattoArchitect in forum Sencha Architect 3.x: Q&A
    Replies: 2
    Last Post: 21 Feb 2014, 8:25 AM
  3. How to encode my custom icons into a web font in st 2.2 ?
    By alexesc in forum Sencha Touch 2.x: Q&A
    Replies: 7
    Last Post: 21 May 2013, 11:18 PM
  4. Replies: 7
    Last Post: 31 Dec 2011, 4:22 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •