Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: How to upgrade Font Awesome

  1. #1
    Sencha User
    Join Date
    Sep 2017
    Posts
    8
    Answers
    1
    Vote Rating
    7
      5  

    Default How to upgrade Font Awesome

    Hi,
    I wrote a tutorial on how to include the new Font Awesome 5.0.+ package to ExtJS.
    I added the package to coexist along with the standard font-awesome (4.7) that is included in ExtJS 6.5.x.


    Due to forum regluations, I was unable (!!!) to write the full tutorial in this forum, so I added it to my Google Drive and shared it with everyone who wants to view it,
    the link is:

    https://docs.google.com/document/d/e...RQOk3-0Dvz/pub
    Cheers,
    Arik
    Last edited by Eizi; 12 Mar 2018 at 12:03 AM. Reason: Document published

  2. #2
    Sencha Premium Member
    Join Date
    Dec 2012
    Location
    Seattle, WA
    Posts
    424
    Answers
    34
    Vote Rating
    58
      0  

    Default

    Excellent...I will give this a try.

  3. #3
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    337
    Answers
    62
    Vote Rating
    61
      0  

    Default

    Thanks for sharing

  4. #4
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    31
    Vote Rating
    3
      1  

    Default

    Thank you. The first try looks good.

    In my dev tools I can see some failed network calls:
    resources/font-awesome-5/webfonts/fontawesome-webfont.woff2?v=5.0.10
    resources/font-awesome-5/webfonts/fontawesome-webfont.woff?v=5.0.10
    resources/font-awesome-5/webfonts/fontawesome-webfont.ttf?v=5.0.10

    Have I missed a point or where does this come from?

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    28
    Vote Rating
    13
      0  

    Default

    Thanks for sharing. Worked well.

  6. #6
    Sencha Premium User
    Join Date
    Dec 2010
    Posts
    275
    Answers
    8
    Vote Rating
    8
      0  

    Default

    How do I get the package to work in a project?
    in app.json I have:

    Code:
       "requires": [
          "sencha-charts",
          "ux",
          "font-awesome-5",
          "font-awesome"
       ],
    Is there anything else I need to do?

  7. #7
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    865
    Answers
    15
    Vote Rating
    78
      0  

    Default

    Thanks for sharing
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  8. #8
    Sencha Premium User
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    120
    Answers
    11
    Vote Rating
    10
      0  

    Default

    Just downloaded the free Font Awesome 5.3.1.

    Opened your tutorial for upgrading and while reading it I see the directory structure of Font Awesome must of changed. Per your tutorial in step 3

    3. Create a new folder called ext/packages/font-awesome-5\sass\etc
    - Into this folder copy all files from the ZIP directory web-fonts-with-css\scss
    Font Awesome 5.3.1 has a directory structure of
    /css
    /js
    /less
    /metadata
    /scss
    /sprites
    /svgs
    /webfonts - this directory has .eot, .woff, .woff2 and both SVG and TrueType font files

    So what is different here?

  9. #9
    Sencha Premium User
    Join Date
    Jun 2017
    Posts
    15
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by SpecialAgent View Post
    Thank you. The first try looks good.

    In my dev tools I can see some failed network calls:
    resources/font-awesome-5/webfonts/fontawesome-webfont.woff2?v=5.0.10
    resources/font-awesome-5/webfonts/fontawesome-webfont.woff?v=5.0.10
    resources/font-awesome-5/webfonts/fontawesome-webfont.ttf?v=5.0.10

    Have I missed a point or where does this come from?
    You can copy these missing files from ../../font-awesome/resources/fonts

  10. #10
    Sencha User
    Join Date
    Apr 2017
    Posts
    7
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks so much for your guide. I'm using the triton theme with my app, which also pulls in the original fontawesome package. It appears that I can pull in the 5.2.7 pro icons when I manually add them. However, the FA icons brought in by the triton theme (e.g. caret arrows, radio buttons, etc.) are not displayed. That is, there is no pseudo 'before' element attached which displays the icon. Has anyone run into this and know of a fix?

    Edit: It seems I can fix the issue by removing the duplicate variables & rules that exist in the font-awesome-5 package's /sass/etc/_icons & font-awesome-5/sass/etc/_variables files and their counterparts in the font-awesome package.

Page 1 of 2 12 LastLast

Similar Threads

  1. Upgrade font-awesome package to lastest version (4.4.0)
    By wemerson.januario in forum Ext 6: Q&A
    Replies: 15
    Last Post: 2 Mar 2018, 8:38 AM
  2. Font.awesome 4.7 in SA 4.2
    By info@ferraresegroup.com in forum Sencha Architect 4.x: Q&A
    Replies: 1
    Last Post: 30 Nov 2017, 8:02 AM
  3. Replies: 8
    Last Post: 7 Feb 2017, 1:37 PM
  4. 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

Tags for this Thread

Posting Permissions

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