Results 1 to 6 of 6

Thread: Font Awesome 5.3.1 for Ext 6.6.0 - Dataview and Grid combo editor example

  1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    321
    Answers
    5

    Default Font Awesome 5.3.1 for Ext 6.6.0 - Dataview and Grid combo editor example

    Hello, thanks to some of you, i did an upgrade for FontAwesome 5.3.1 under Ext 6.6.0
    Forked from :



    You need to download the free fontawesome 5.3.1 pack.
    In your Ext application, you need to replace the ext/packages/font-awesome folder.

    Some changes to do in these files :

    • ext/packages/font-awesome/sass/etc/_core.scss
    • ext/packages/font-awesome/sass/etc/_icons.scss
    • ext/packages/font-awesome/sass/etc/_variables.scss

    You must rename :

    • brands.scss to fa-brands.scss
    • regular.scss to fa-regular.scss
    • solid.scss to fa-solid.scss

    To help you for these steps, you can find attached the zip of the ext/packages/font-awesome folder (due to file size limit, i put 5 zip).

    In the ext/classic/theme-neutral/sass/etc/mixins/font-icon.scss, you need to change, in the function "@mixin font-icon-pseudo-content" (line 170)
    Code:
    content:  $char;
    to
    Code:
    content: '#{$char}';
    That's it : you have installed the fontAwesome 5.3.1 for Extjs 6.6.0


    When you want to use the brand icons, you need to specify :
    Code:
    x-fab fa-icon_name
    For other icon (solid and regular), it's as usual :
    Code:
    x-fa fa-icon_name
    My fiddle example : https://fiddle.sencha.com/#view/editor&fiddle/2l3c

    I don't know why the tpl and the render dont't work in my fiddle.
    All is working fine in my application.
    If someone can help to have a fully working fiddle...
    Attached Files Attached Files

  2. #2
    Sencha Premium User dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,224
    Answers
    26

    Default

    been hoping to get some time to build a tool to automate this, as FA releases new icons for 5.x all the time...

    1) Download / Upload FA licenced files to server
    2) Proceess files
    3) Export zip of updated files or Push to private script cdn

    #TODO:
    Cloud Application Architect

    Sencha Specialist / Sencha MVP / Sencha Technical Trainer
    ExtJs Developer + Contributor since 0.2.2 - Champion of the per developer license.

  3. #3
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    321
    Answers
    5

    Default

    Some screenshots to show how it looks.

    In combo
    fa_combo.PNG

    In list
    fa_liste.PNG

  4. #4

    Default

    Hi
    Thanks for your post
    I followed the steps but it doesn't work 100%
    I can see the new icons with x-fa fa-... but I lost all the ExtJs icons like the ones used in comboxes, pickers...(x-icon-el x-font-icon)
    Please let me know if you have an idea on how to fix that.
    Thank you

  5. #5

    Default

    Quote Originally Posted by frdal View Post
    Hi
    Thanks for your post
    I followed the steps but it doesn't work 100%
    I can see the new icons with x-fa fa-... but I lost all the ExtJs icons like the ones used in comboxes, pickers...(x-icon-el x-font-icon)
    Please let me know if you have an idea on how to fix that.
    Thank you
    I have the same problem as you.
    Did you fix this problem?

  6. #6
    Sencha User
    Join Date
    Jan 2017
    Posts
    5

    Default

    Quote Originally Posted by Thanh.Nguyen View Post
    I have the same problem as you.
    Did you fix this problem?
    Wrap all variable values in _variables.scss with double quotes, e.g. change from \f123 to "\f123"

Similar Threads

  1. Font Awesome
    By tomdchi in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 14 May 2018, 12:42 PM
  2. Font Icons (Pictos, Font Awesome) not available on Windows 8.1
    By garysybex1 in forum Sencha Touch 2.x: Bugs
    Replies: 0
    Last Post: 1 Jun 2016, 5:33 AM
  3. Replies: 1
    Last Post: 31 Mar 2015, 2:58 AM
  4. Font Awesome
    By ssamayoa in forum Sencha Architect 2.x: Help & Discussions
    Replies: 14
    Last Post: 17 Mar 2015, 12:42 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
  •