Results 1 to 8 of 8

Thread: Upgrading Font Awesome to 5.6.1 Pro

  1. #1
    Sencha User
    Join Date
    Feb 2015
    Posts
    20

    Default Upgrading Font Awesome to 5.6.1 Pro

    I have been trying to upgrade to the latest version of Font Awesome Pro, but I have ran into an issue. I followed this guide to start and I was able to get everything to build but for some reason the css for content is missing the quotes. Example: It looks like this {content: \f06a}. Where as it should look like this {content: "\f06a"}. I noticed that in the latest version of FA, in the _variables.scss file that the variables values don't have quotes around them but instead use a function to add the quotes. Example: 4.7 looks like this $fa-var-500px: "\f26e";. 5.6.1 looks like this $fa-var-500px: \f26e;. I noticed at line 4 of the guide it shows to "fix" the function, but I have tried it with and without the "fix" and neither work. I did notice that I can go through can wrap all the values in quotes it works. Does anyone have any suggestions?

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

    Default

    write a server-side script to drop the FA zip in and get out the ExtJS friendly version using the guide.
    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 Premium User sdodierl's Avatar
    Join Date
    Oct 2017
    Location
    Paris
    Posts
    22

    Default

    A colleague of mines has replaced our FA4 package by a fully working FA5 one, with all fonts. I'll ask him if he can log in and help, but no promises since he doesn't have a forum account :p
    We're recruiting

    EcoMundo is looking for ExtJS architects and developers in their offices in πŸ‡«πŸ‡· Paris, πŸ‡²πŸ‡¬ Tananarive and πŸ‡»πŸ‡³ Ho Chi Minh City!

    Check out https://www.ecomundo.eu/fr/recrutement or get in touch with me. We're a global actor in software for chemical regulatory compliance, with the size and state of mind of a start-up.

  4. #4
    Sencha User
    Join Date
    Feb 2015
    Posts
    20

    Default

    Quote Originally Posted by sdodierl View Post
    A colleague of mines has replaced our FA4 package by a fully working FA5 one, with all fonts. I'll ask him if he can log in and help, but no promises since he doesn't have a forum account :p
    Thank you. I can solve the issue by wrapping everything in quotes, but I rather not do that and have it build correct in the first place.

  5. #5
    Sencha Premium User sdodierl's Avatar
    Join Date
    Oct 2017
    Location
    Paris
    Posts
    22

    Default

    I don't remember the details (hence why I asked my colleague if he can find time to give you tips), but you'll need to modify FA's CSS. And yeah, I remember that my colleague had a lot of trouble getting all files to behave properly wrt. quotes, especially since icons are loaded differently when you use them directly or when you inject them into components via the theme.

    However, the key is to script those modifications instead of doing them. We figured that, since we wrote our FA 5.4 package, we'd only need to run a small sed script on the file exporting symbols and to change font files when we want to update to a newer version of FA. That's acceptable for us since we have the ability to automate updates if that ever becomes necessary.
    We're recruiting

    EcoMundo is looking for ExtJS architects and developers in their offices in πŸ‡«πŸ‡· Paris, πŸ‡²πŸ‡¬ Tananarive and πŸ‡»πŸ‡³ Ho Chi Minh City!

    Check out https://www.ecomundo.eu/fr/recrutement or get in touch with me. We're a global actor in software for chemical regulatory compliance, with the size and state of mind of a start-up.

  6. #6
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    38
    Answers
    3

    Default

    Hi,

    Take a look at this thread: https://www.sencha.com/forum/showthr...editor-example

    Especially the part where you have to replace:
    Code:
    content:  $char;
    with
    Code:
    content: '#{$char}';
    in the function "@mixin font-icon-pseudo-content" from ext/classic/theme-neutral/sass/etc/mixins/font-icon.scss

    Regards,
    Danny

  7. #7
    Sencha User
    Join Date
    Feb 2015
    Posts
    20

    Default

    Thanks for the reply. That didn't seem to make a difference for me. Also with those instructions, it looks like I wouldn't be able to use the light fonts. It looks like it would work for a free upgrade though.

  8. #8
    Sencha Premium User sdodierl's Avatar
    Join Date
    Oct 2017
    Location
    Paris
    Posts
    22

    Default

    So, I looked at our implementation.

    We modified ext/ directly to add a font-awesome-pro package to it, which we then make the framework use instead of font-awesome to avoid double loading (is there a better way!?)

    My colleague who implemented this then started from FA5's CSS and re-introduced fa-content as such. Not sure if important is needed or not.

    Code:
    @function fa-content($fa-var) {
        @return unquote(""\#{ $fa-var }"") !important;
     }


    All of our $fa-var-xxx declarations are double-quoted. Variables looks like
    Code:
    $fa-var-500px: "\f26e";
    And icons looks like
    Code:
    .#{$fa-css-prefix}-500px:before { content: fa-content($fa-var-500px); }

    With this, the framework's themes use our FA5 icons and the icons can be used with iconCls "fa fa-foo" or "fal fa-foo". To make Light the default, we modified the light.scss file to also apply its logic to the ".fa" selector on top of ".fal"

    Code:
    /*! * Font Awesome Pro 5.4.1 by @fontawesome - https://fontawesome.com
     * License - https://fontawesome.com/license (Commercial License)
     */
    
    @font-face {
      font-family: 'Font Awesome 5 Pro';
      font-style: normal;
      font-weight: 300;
      src: url('#{$fa-font-path}/fa-light-300.eot');
      src: url('#{$fa-font-path}/fa-light-300.eot?#iefix') format('embedded-opentype'),
      url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'),
      url('#{$fa-font-path}/fa-light-300.woff') format('woff'),
      url('#{$fa-font-path}/fa-light-300.ttf') format('truetype'),
      url('#{$fa-font-path}/fa-light-300.svg#fontawesome') format('svg');
    }
    
    
    .fa,
    .fal {
      font-family: 'Font Awesome 5 Pro';
      font-weight: 300;
    }
    We're recruiting

    EcoMundo is looking for ExtJS architects and developers in their offices in πŸ‡«πŸ‡· Paris, πŸ‡²πŸ‡¬ Tananarive and πŸ‡»πŸ‡³ Ho Chi Minh City!

    Check out https://www.ecomundo.eu/fr/recrutement or get in touch with me. We're a global actor in software for chemical regulatory compliance, with the size and state of mind of a start-up.

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.awesome 4.7 in SA 4.2
    By [email protected] in forum Sencha Architect 4.x: Q&A
    Replies: 1
    Last Post: 30 Nov 2017, 8:02 AM
  3. 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
  4. Font Awesome
    By ssamayoa in forum Sencha Architect 2.x: Help & Discussions
    Replies: 14
    Last Post: 17 Mar 2015, 12:42 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
  •