Edited at

How to upgrade Font Awesome(4.7.0 -> free 5.0.6) in ExtJS6.5

More than 1 year has passed since last update.


How to upgrade Font Awesome(4.7.0 -> free 5.0.6) in ExtJS6.5

The result of the following steps is on GitHub.

extjs-package-fontawesome


STEPS


1. Get Font Awesome zip file


  • Download the new version(free 5.0.6) as zip file from the Font Awesome official page
    Font Awesome

  • Unzip it into an arbitrary folder


2. Replace font files


  • Remove everything from <project_home>/ext(framework_dir)/packages/font-awesome/resources/fonts/

  • Copy everything from fontawesome-free-5.0.6/web-fonts-with-css/webfonts/ to <project_home>/ext(framework_dir)/packages/font-awesome/resources/fonts/


3. Replace sass files


  • Remove everything from <project_home>/ext(framework_dir)/packages/font-awesome/sass/etc/, except all.scss

  • Copy everything from fontawesome-free-5.0.6/web-fonts-with-css/scss/ to <project_home>/ext(framework_dir)/packages/font-awesome/sass/etc/


4. Edit /sass/etc/all.scss


  • Edit <project_home>/ext(framework_dir)/packages/font-awesome/sass/etc/all.scss as follows


  • Add blocks of the following to the end


    /sass/etc/all.scss

    @import "fa-brands.scss";
    
    @import "fa-regular.scss";
    @import "fa-solid.scss";




5. Edit /sass/src/all.scss


  • Edit <project_home>/ext(framework_dir)/packages/font-awesome/sass/src/all.scss as follows

  • Delete row of @import "../etc/_path.scss";


  • Replace a block of the following

    from


    /sass/src/all.scss

    .#{$prefix}fa:before {
    
    font-family: FontAwesome !important;
    }

    to


    /sass/src/all.scss

    .#{$prefix}fa,
    
    .#{$prefix}fas {
    &:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
    }
    }
    .#{$prefix}far:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 400;
    }
    .#{$prefix}fab:before {
    font-family: 'Font Awesome 5 Brands' !important;
    }




6. Edit /sass/etc/_icons.scss


  • Edit <project_home>/ext(framework_dir)/packages/font-awesome/sass/etc/_icons.scss as follows


  • Add blocks of the following to the top


    /sass/etc/_icons.scss

    $ext-fa-vars-important: dynamic(true);

    @mixin ext-declare-fa-var($value) {
    @if $ext-fa-vars-important {
    content: "#{$value}" !important;
    } @else {
    content: "#{$value}";
    }
    }




  • Replace all

    content: fa\-content -> @include ext-declare-fa-var



  • Icon Name Changes Complete List as a reference, add blocks of the following to the end


    /sass/etc/_icons.scss

    // porting from older version
    
    .#{$fa-css-prefix}-address-book-o:before { @include ext-declare-fa-var($fa-var-address-book-o); }
    .#{$fa-css-prefix}-address-card-o:before { @include ext-declare-fa-var($fa-var-address-card-o); }
    .#{$fa-css-prefix}-area-chart:before { @include ext-declare-fa-var($fa-var-area-chart); }
    .#{$fa-css-prefix}-arrow-circle-o-down:before { @include ext-declare-fa-var($fa-var-arrow-circle-o-down); }
    .#{$fa-css-prefix}-arrow-circle-o-left:before { @include ext-declare-fa-var($fa-var-arrow-circle-o-left); }
    .#{$fa-css-prefix}-arrow-circle-o-right:before { @include ext-declare-fa-var($fa-var-arrow-circle-o-right); }
    .#{$fa-css-prefix}-arrow-circle-o-up:before { @include ext-declare-fa-var($fa-var-arrow-circle-o-up); }
    .#{$fa-css-prefix}-arrows-alt:before { @include ext-declare-fa-var($fa-var-arrows-alt); }
    .#{$fa-css-prefix}-arrows-h:before { @include ext-declare-fa-var($fa-var-arrows-h); }
    .#{$fa-css-prefix}-arrows-v:before { @include ext-declare-fa-var($fa-var-arrows-v); }
    .#{$fa-css-prefix}-arrows:before { @include ext-declare-fa-var($fa-var-arrows); }
    .#{$fa-css-prefix}-asl-interpreting:before { @include ext-declare-fa-var($fa-var-asl-interpreting); }
    .#{$fa-css-prefix}-automobile:before { @include ext-declare-fa-var($fa-var-automobile); }
    .#{$fa-css-prefix}-bank:before { @include ext-declare-fa-var($fa-var-bank); }
    .#{$fa-css-prefix}-bar-chart-o:before { @include ext-declare-fa-var($fa-var-bar-chart-o); }
    .#{$fa-css-prefix}-bar-chart:before { @include ext-declare-fa-var($fa-var-bar-chart); }
    .#{$fa-css-prefix}-bathtub:before { @include ext-declare-fa-var($fa-var-bathtub); }
    .#{$fa-css-prefix}-battery-0:before { @include ext-declare-fa-var($fa-var-battery-0); }
    .#{$fa-css-prefix}-battery-1:before { @include ext-declare-fa-var($fa-var-battery-1); }
    .#{$fa-css-prefix}-battery-2:before { @include ext-declare-fa-var($fa-var-battery-2); }
    .#{$fa-css-prefix}-battery-3:before { @include ext-declare-fa-var($fa-var-battery-3); }
    .#{$fa-css-prefix}-battery-4:before { @include ext-declare-fa-var($fa-var-battery-4); }
    .#{$fa-css-prefix}-battery:before { @include ext-declare-fa-var($fa-var-battery); }
    .#{$fa-css-prefix}-bell-o:before { @include ext-declare-fa-var($fa-var-bell-o); }
    .#{$fa-css-prefix}-bell-slash-o:before { @include ext-declare-fa-var($fa-var-bell-slash-o); }
    .#{$fa-css-prefix}-bitbucket-square:before { @include ext-declare-fa-var($fa-var-bitbucket-square); }
    .#{$fa-css-prefix}-bitcoin:before { @include ext-declare-fa-var($fa-var-bitcoin); }
    .#{$fa-css-prefix}-bookmark-o:before { @include ext-declare-fa-var($fa-var-bookmark-o); }
    .#{$fa-css-prefix}-building-o:before { @include ext-declare-fa-var($fa-var-building-o); }
    .#{$fa-css-prefix}-cab:before { @include ext-declare-fa-var($fa-var-cab); }
    .#{$fa-css-prefix}-calendar-check-o:before { @include ext-declare-fa-var($fa-var-calendar-check-o); }
    .#{$fa-css-prefix}-calendar-minus-o:before { @include ext-declare-fa-var($fa-var-calendar-minus-o); }
    .#{$fa-css-prefix}-calendar-o:before { @include ext-declare-fa-var($fa-var-calendar-o); }
    .#{$fa-css-prefix}-calendar-plus-o:before { @include ext-declare-fa-var($fa-var-calendar-plus-o); }
    .#{$fa-css-prefix}-calendar-times-o:before { @include ext-declare-fa-var($fa-var-calendar-times-o); }
    .#{$fa-css-prefix}-calendar:before { @include ext-declare-fa-var($fa-var-calendar); }
    .#{$fa-css-prefix}-caret-square-o-down:before { @include ext-declare-fa-var($fa-var-caret-square-o-down); }
    .#{$fa-css-prefix}-caret-square-o-left:before { @include ext-declare-fa-var($fa-var-caret-square-o-left); }
    .#{$fa-css-prefix}-caret-square-o-right:before { @include ext-declare-fa-var($fa-var-caret-square-o-right); }
    .#{$fa-css-prefix}-caret-square-o-up:before { @include ext-declare-fa-var($fa-var-caret-square-o-up); }
    .#{$fa-css-prefix}-cc:before { @include ext-declare-fa-var($fa-var-cc); }
    .#{$fa-css-prefix}-chain-broken:before { @include ext-declare-fa-var($fa-var-chain-broken); }
    .#{$fa-css-prefix}-chain:before { @include ext-declare-fa-var($fa-var-chain); }
    .#{$fa-css-prefix}-check-circle-o:before { @include ext-declare-fa-var($fa-var-check-circle-o); }
    .#{$fa-css-prefix}-check-square-o:before { @include ext-declare-fa-var($fa-var-check-square-o); }
    .#{$fa-css-prefix}-circle-o-notch:before { @include ext-declare-fa-var($fa-var-circle-o-notch); }
    .#{$fa-css-prefix}-circle-o:before { @include ext-declare-fa-var($fa-var-circle-o); }
    .#{$fa-css-prefix}-circle-thin:before { @include ext-declare-fa-var($fa-var-circle-thin); }
    .#{$fa-css-prefix}-clock-o:before { @include ext-declare-fa-var($fa-var-clock-o); }
    .#{$fa-css-prefix}-close:before { @include ext-declare-fa-var($fa-var-close); }
    .#{$fa-css-prefix}-cloud-download:before { @include ext-declare-fa-var($fa-var-cloud-download); }
    .#{$fa-css-prefix}-cloud-upload:before { @include ext-declare-fa-var($fa-var-cloud-upload); }
    .#{$fa-css-prefix}-cny:before { @include ext-declare-fa-var($fa-var-cny); }
    .#{$fa-css-prefix}-code-fork:before { @include ext-declare-fa-var($fa-var-code-fork); }
    .#{$fa-css-prefix}-comment-o:before { @include ext-declare-fa-var($fa-var-comment-o); }
    .#{$fa-css-prefix}-commenting-o:before { @include ext-declare-fa-var($fa-var-commenting-o); }
    .#{$fa-css-prefix}-commenting:before { @include ext-declare-fa-var($fa-var-commenting); }
    .#{$fa-css-prefix}-comments-o:before { @include ext-declare-fa-var($fa-var-comments-o); }
    .#{$fa-css-prefix}-credit-card-alt:before { @include ext-declare-fa-var($fa-var-credit-card-alt); }
    .#{$fa-css-prefix}-cutlery:before { @include ext-declare-fa-var($fa-var-cutlery); }
    .#{$fa-css-prefix}-dashboard:before { @include ext-declare-fa-var($fa-var-dashboard); }
    .#{$fa-css-prefix}-deafness:before { @include ext-declare-fa-var($fa-var-deafness); }
    .#{$fa-css-prefix}-dedent:before { @include ext-declare-fa-var($fa-var-dedent); }
    .#{$fa-css-prefix}-diamond:before { @include ext-declare-fa-var($fa-var-diamond); }
    .#{$fa-css-prefix}-dollar:before { @include ext-declare-fa-var($fa-var-dollar); }
    .#{$fa-css-prefix}-dot-circle-o:before { @include ext-declare-fa-var($fa-var-dot-circle-o); }
    .#{$fa-css-prefix}-drivers-license-o:before { @include ext-declare-fa-var($fa-var-drivers-license-o); }
    .#{$fa-css-prefix}-drivers-license:before { @include ext-declare-fa-var($fa-var-drivers-license); }
    .#{$fa-css-prefix}-eercast:before { @include ext-declare-fa-var($fa-var-eercast); }
    .#{$fa-css-prefix}-envelope-o:before { @include ext-declare-fa-var($fa-var-envelope-o); }
    .#{$fa-css-prefix}-envelope-open-o:before { @include ext-declare-fa-var($fa-var-envelope-open-o); }
    .#{$fa-css-prefix}-eur:before { @include ext-declare-fa-var($fa-var-eur); }
    .#{$fa-css-prefix}-euro:before { @include ext-declare-fa-var($fa-var-euro); }
    .#{$fa-css-prefix}-exchange:before { @include ext-declare-fa-var($fa-var-exchange); }
    .#{$fa-css-prefix}-external-link-square:before { @include ext-declare-fa-var($fa-var-external-link-square); }
    .#{$fa-css-prefix}-external-link:before { @include ext-declare-fa-var($fa-var-external-link); }
    .#{$fa-css-prefix}-eyedropper:before { @include ext-declare-fa-var($fa-var-eyedropper); }
    .#{$fa-css-prefix}-fa:before { @include ext-declare-fa-var($fa-var-fa); }
    .#{$fa-css-prefix}-facebook-f:before { @include ext-declare-fa-var($fa-var-facebook-f); }
    .#{$fa-css-prefix}-facebook-official:before { @include ext-declare-fa-var($fa-var-facebook-official); }
    .#{$fa-css-prefix}-facebook:before { @include ext-declare-fa-var($fa-var-facebook); }
    .#{$fa-css-prefix}-feed:before { @include ext-declare-fa-var($fa-var-feed); }
    .#{$fa-css-prefix}-file-archive-o:before { @include ext-declare-fa-var($fa-var-file-archive-o); }
    .#{$fa-css-prefix}-file-audio-o:before { @include ext-declare-fa-var($fa-var-file-audio-o); }
    .#{$fa-css-prefix}-file-code-o:before { @include ext-declare-fa-var($fa-var-file-code-o); }
    .#{$fa-css-prefix}-file-excel-o:before { @include ext-declare-fa-var($fa-var-file-excel-o); }
    .#{$fa-css-prefix}-file-image-o:before { @include ext-declare-fa-var($fa-var-file-image-o); }
    .#{$fa-css-prefix}-file-movie-o:before { @include ext-declare-fa-var($fa-var-file-movie-o); }
    .#{$fa-css-prefix}-file-o:before { @include ext-declare-fa-var($fa-var-file-o); }
    .#{$fa-css-prefix}-file-pdf-o:before { @include ext-declare-fa-var($fa-var-file-pdf-o); }
    .#{$fa-css-prefix}-file-photo-o:before { @include ext-declare-fa-var($fa-var-file-photo-o); }
    .#{$fa-css-prefix}-file-picture-o:before { @include ext-declare-fa-var($fa-var-file-picture-o); }
    .#{$fa-css-prefix}-file-powerpoint-o:before { @include ext-declare-fa-var($fa-var-file-powerpoint-o); }
    .#{$fa-css-prefix}-file-sound-o:before { @include ext-declare-fa-var($fa-var-file-sound-o); }
    .#{$fa-css-prefix}-file-text-o:before { @include ext-declare-fa-var($fa-var-file-text-o); }
    .#{$fa-css-prefix}-file-text:before { @include ext-declare-fa-var($fa-var-file-text); }
    .#{$fa-css-prefix}-file-video-o:before { @include ext-declare-fa-var($fa-var-file-video-o); }
    .#{$fa-css-prefix}-file-word-o:before { @include ext-declare-fa-var($fa-var-file-word-o); }
    .#{$fa-css-prefix}-file-zip-o:before { @include ext-declare-fa-var($fa-var-file-zip-o); }
    .#{$fa-css-prefix}-files-o:before { @include ext-declare-fa-var($fa-var-files-o); }
    .#{$fa-css-prefix}-flag-o:before { @include ext-declare-fa-var($fa-var-flag-o); }
    .#{$fa-css-prefix}-flash:before { @include ext-declare-fa-var($fa-var-flash); }
    .#{$fa-css-prefix}-floppy-o:before { @include ext-declare-fa-var($fa-var-floppy-o); }
    .#{$fa-css-prefix}-folder-o:before { @include ext-declare-fa-var($fa-var-folder-o); }
    .#{$fa-css-prefix}-folder-open-o:before { @include ext-declare-fa-var($fa-var-folder-open-o); }
    .#{$fa-css-prefix}-frown-o:before { @include ext-declare-fa-var($fa-var-frown-o); }
    .#{$fa-css-prefix}-futbol-o:before { @include ext-declare-fa-var($fa-var-futbol-o); }
    .#{$fa-css-prefix}-gbp:before { @include ext-declare-fa-var($fa-var-gbp); }
    .#{$fa-css-prefix}-ge:before { @include ext-declare-fa-var($fa-var-ge); }
    .#{$fa-css-prefix}-gear:before { @include ext-declare-fa-var($fa-var-gear); }
    .#{$fa-css-prefix}-gears:before { @include ext-declare-fa-var($fa-var-gears); }
    .#{$fa-css-prefix}-gittip:before { @include ext-declare-fa-var($fa-var-gittip); }
    .#{$fa-css-prefix}-glass:before { @include ext-declare-fa-var($fa-var-glass); }
    .#{$fa-css-prefix}-google-plus-circle:before { @include ext-declare-fa-var($fa-var-google-plus-circle); }
    .#{$fa-css-prefix}-google-plus-official:before { @include ext-declare-fa-var($fa-var-google-plus-official); }
    .#{$fa-css-prefix}-google-plus:before { @include ext-declare-fa-var($fa-var-google-plus); }
    .#{$fa-css-prefix}-group:before { @include ext-declare-fa-var($fa-var-group); }
    .#{$fa-css-prefix}-hand-grab-o:before { @include ext-declare-fa-var($fa-var-hand-grab-o); }
    .#{$fa-css-prefix}-hand-lizard-o:before { @include ext-declare-fa-var($fa-var-hand-lizard-o); }
    .#{$fa-css-prefix}-hand-o-down:before { @include ext-declare-fa-var($fa-var-hand-o-down); }
    .#{$fa-css-prefix}-hand-o-left:before { @include ext-declare-fa-var($fa-var-hand-o-left); }
    .#{$fa-css-prefix}-hand-o-right:before { @include ext-declare-fa-var($fa-var-hand-o-right); }
    .#{$fa-css-prefix}-hand-o-up:before { @include ext-declare-fa-var($fa-var-hand-o-up); }
    .#{$fa-css-prefix}-hand-paper-o:before { @include ext-declare-fa-var($fa-var-hand-paper-o); }
    .#{$fa-css-prefix}-hand-peace-o:before { @include ext-declare-fa-var($fa-var-hand-peace-o); }
    .#{$fa-css-prefix}-hand-pointer-o:before { @include ext-declare-fa-var($fa-var-hand-pointer-o); }
    .#{$fa-css-prefix}-hand-rock-o:before { @include ext-declare-fa-var($fa-var-hand-rock-o); }
    .#{$fa-css-prefix}-hand-scissors-o:before { @include ext-declare-fa-var($fa-var-hand-scissors-o); }
    .#{$fa-css-prefix}-hand-spock-o:before { @include ext-declare-fa-var($fa-var-hand-spock-o); }
    .#{$fa-css-prefix}-hand-stop-o:before { @include ext-declare-fa-var($fa-var-hand-stop-o); }
    .#{$fa-css-prefix}-handshake-o:before { @include ext-declare-fa-var($fa-var-handshake-o); }
    .#{$fa-css-prefix}-hard-of-hearing:before { @include ext-declare-fa-var($fa-var-hard-of-hearing); }
    .#{$fa-css-prefix}-hdd-o:before { @include ext-declare-fa-var($fa-var-hdd-o); }
    .#{$fa-css-prefix}-header:before { @include ext-declare-fa-var($fa-var-header); }
    .#{$fa-css-prefix}-heart-o:before { @include ext-declare-fa-var($fa-var-heart-o); }
    .#{$fa-css-prefix}-hospital-o:before { @include ext-declare-fa-var($fa-var-hospital-o); }
    .#{$fa-css-prefix}-hotel:before { @include ext-declare-fa-var($fa-var-hotel); }
    .#{$fa-css-prefix}-hourglass-1:before { @include ext-declare-fa-var($fa-var-hourglass-1); }
    .#{$fa-css-prefix}-hourglass-2:before { @include ext-declare-fa-var($fa-var-hourglass-2); }
    .#{$fa-css-prefix}-hourglass-3:before { @include ext-declare-fa-var($fa-var-hourglass-3); }
    .#{$fa-css-prefix}-hourglass-o:before { @include ext-declare-fa-var($fa-var-hourglass-o); }
    .#{$fa-css-prefix}-id-card-o:before { @include ext-declare-fa-var($fa-var-id-card-o); }
    .#{$fa-css-prefix}-ils:before { @include ext-declare-fa-var($fa-var-ils); }
    .#{$fa-css-prefix}-image:before { @include ext-declare-fa-var($fa-var-image); }
    .#{$fa-css-prefix}-inr:before { @include ext-declare-fa-var($fa-var-inr); }
    .#{$fa-css-prefix}-institution:before { @include ext-declare-fa-var($fa-var-institution); }
    .#{$fa-css-prefix}-intersex:before { @include ext-declare-fa-var($fa-var-intersex); }
    .#{$fa-css-prefix}-jpy:before { @include ext-declare-fa-var($fa-var-jpy); }
    .#{$fa-css-prefix}-keyboard-o:before { @include ext-declare-fa-var($fa-var-keyboard-o); }
    .#{$fa-css-prefix}-krw:before { @include ext-declare-fa-var($fa-var-krw); }
    .#{$fa-css-prefix}-legal:before { @include ext-declare-fa-var($fa-var-legal); }
    .#{$fa-css-prefix}-lemon-o:before { @include ext-declare-fa-var($fa-var-lemon-o); }
    .#{$fa-css-prefix}-level-down:before { @include ext-declare-fa-var($fa-var-level-down); }
    .#{$fa-css-prefix}-level-up:before { @include ext-declare-fa-var($fa-var-level-up); }
    .#{$fa-css-prefix}-life-bouy:before { @include ext-declare-fa-var($fa-var-life-bouy); }
    .#{$fa-css-prefix}-life-buoy:before { @include ext-declare-fa-var($fa-var-life-buoy); }
    .#{$fa-css-prefix}-life-saver:before { @include ext-declare-fa-var($fa-var-life-saver); }
    .#{$fa-css-prefix}-lightbulb-o:before { @include ext-declare-fa-var($fa-var-lightbulb-o); }
    .#{$fa-css-prefix}-line-chart:before { @include ext-declare-fa-var($fa-var-line-chart); }
    .#{$fa-css-prefix}-linkedin-square:before { @include ext-declare-fa-var($fa-var-linkedin-square); }
    .#{$fa-css-prefix}-linkedin:before { @include ext-declare-fa-var($fa-var-linkedin); }
    .#{$fa-css-prefix}-long-arrow-down:before { @include ext-declare-fa-var($fa-var-long-arrow-down); }
    .#{$fa-css-prefix}-long-arrow-left:before { @include ext-declare-fa-var($fa-var-long-arrow-left); }
    .#{$fa-css-prefix}-long-arrow-right:before { @include ext-declare-fa-var($fa-var-long-arrow-right); }
    .#{$fa-css-prefix}-long-arrow-up:before { @include ext-declare-fa-var($fa-var-long-arrow-up); }
    .#{$fa-css-prefix}-mail-forward:before { @include ext-declare-fa-var($fa-var-mail-forward); }
    .#{$fa-css-prefix}-mail-reply-all:before { @include ext-declare-fa-var($fa-var-mail-reply-all); }
    .#{$fa-css-prefix}-mail-reply:before { @include ext-declare-fa-var($fa-var-mail-reply); }
    .#{$fa-css-prefix}-map-marker:before { @include ext-declare-fa-var($fa-var-map-marker); }
    .#{$fa-css-prefix}-map-o:before { @include ext-declare-fa-var($fa-var-map-o); }
    .#{$fa-css-prefix}-meanpath:before { @include ext-declare-fa-var($fa-var-meanpath); }
    .#{$fa-css-prefix}-meh-o:before { @include ext-declare-fa-var($fa-var-meh-o); }
    .#{$fa-css-prefix}-minus-square-o:before { @include ext-declare-fa-var($fa-var-minus-square-o); }
    .#{$fa-css-prefix}-mobile-phone:before { @include ext-declare-fa-var($fa-var-mobile-phone); }
    .#{$fa-css-prefix}-mobile:before { @include ext-declare-fa-var($fa-var-mobile); }
    .#{$fa-css-prefix}-money:before { @include ext-declare-fa-var($fa-var-money); }
    .#{$fa-css-prefix}-moon-o:before { @include ext-declare-fa-var($fa-var-moon-o); }
    .#{$fa-css-prefix}-mortar-board:before { @include ext-declare-fa-var($fa-var-mortar-board); }
    .#{$fa-css-prefix}-navicon:before { @include ext-declare-fa-var($fa-var-navicon); }
    .#{$fa-css-prefix}-newspaper-o:before { @include ext-declare-fa-var($fa-var-newspaper-o); }
    .#{$fa-css-prefix}-paper-plane-o:before { @include ext-declare-fa-var($fa-var-paper-plane-o); }
    .#{$fa-css-prefix}-paste:before { @include ext-declare-fa-var($fa-var-paste); }
    .#{$fa-css-prefix}-pause-circle-o:before { @include ext-declare-fa-var($fa-var-pause-circle-o); }
    .#{$fa-css-prefix}-pencil-square-o:before { @include ext-declare-fa-var($fa-var-pencil-square-o); }
    .#{$fa-css-prefix}-pencil-square:before { @include ext-declare-fa-var($fa-var-pencil-square); }
    .#{$fa-css-prefix}-pencil:before { @include ext-declare-fa-var($fa-var-pencil); }
    .#{$fa-css-prefix}-photo:before { @include ext-declare-fa-var($fa-var-photo); }
    .#{$fa-css-prefix}-picture-o:before { @include ext-declare-fa-var($fa-var-picture-o); }
    .#{$fa-css-prefix}-pie-chart:before { @include ext-declare-fa-var($fa-var-pie-chart); }
    .#{$fa-css-prefix}-play-circle-o:before { @include ext-declare-fa-var($fa-var-play-circle-o); }
    .#{$fa-css-prefix}-plus-square-o:before { @include ext-declare-fa-var($fa-var-plus-square-o); }
    .#{$fa-css-prefix}-question-circle-o:before { @include ext-declare-fa-var($fa-var-question-circle-o); }
    .#{$fa-css-prefix}-ra:before { @include ext-declare-fa-var($fa-var-ra); }
    .#{$fa-css-prefix}-refresh:before { @include ext-declare-fa-var($fa-var-refresh); }
    .#{$fa-css-prefix}-remove:before { @include ext-declare-fa-var($fa-var-remove); }
    .#{$fa-css-prefix}-reorder:before { @include ext-declare-fa-var($fa-var-reorder); }
    .#{$fa-css-prefix}-repeat:before { @include ext-declare-fa-var($fa-var-repeat); }
    .#{$fa-css-prefix}-resistance:before { @include ext-declare-fa-var($fa-var-resistance); }
    .#{$fa-css-prefix}-rmb:before { @include ext-declare-fa-var($fa-var-rmb); }
    .#{$fa-css-prefix}-rotate-left:before { @include ext-declare-fa-var($fa-var-rotate-left); }
    .#{$fa-css-prefix}-rotate-right:before { @include ext-declare-fa-var($fa-var-rotate-right); }
    .#{$fa-css-prefix}-rouble:before { @include ext-declare-fa-var($fa-var-rouble); }
    .#{$fa-css-prefix}-rub:before { @include ext-declare-fa-var($fa-var-rub); }
    .#{$fa-css-prefix}-ruble:before { @include ext-declare-fa-var($fa-var-ruble); }
    .#{$fa-css-prefix}-rupee:before { @include ext-declare-fa-var($fa-var-rupee); }
    .#{$fa-css-prefix}-s15:before { @include ext-declare-fa-var($fa-var-s15); }
    .#{$fa-css-prefix}-scissors:before { @include ext-declare-fa-var($fa-var-scissors); }
    .#{$fa-css-prefix}-send-o:before { @include ext-declare-fa-var($fa-var-send-o); }
    .#{$fa-css-prefix}-send:before { @include ext-declare-fa-var($fa-var-send); }
    .#{$fa-css-prefix}-share-square-o:before { @include ext-declare-fa-var($fa-var-share-square-o); }
    .#{$fa-css-prefix}-shekel:before { @include ext-declare-fa-var($fa-var-shekel); }
    .#{$fa-css-prefix}-sheqel:before { @include ext-declare-fa-var($fa-var-sheqel); }
    .#{$fa-css-prefix}-shield:before { @include ext-declare-fa-var($fa-var-shield); }
    .#{$fa-css-prefix}-sign-in:before { @include ext-declare-fa-var($fa-var-sign-in); }
    .#{$fa-css-prefix}-sign-out:before { @include ext-declare-fa-var($fa-var-sign-out); }
    .#{$fa-css-prefix}-signing:before { @include ext-declare-fa-var($fa-var-signing); }
    .#{$fa-css-prefix}-sliders:before { @include ext-declare-fa-var($fa-var-sliders); }
    .#{$fa-css-prefix}-smile-o:before { @include ext-declare-fa-var($fa-var-smile-o); }
    .#{$fa-css-prefix}-snowflake-o:before { @include ext-declare-fa-var($fa-var-snowflake-o); }
    .#{$fa-css-prefix}-soccer-ball-o:before { @include ext-declare-fa-var($fa-var-soccer-ball-o); }
    .#{$fa-css-prefix}-sort-alpha-asc:before { @include ext-declare-fa-var($fa-var-sort-alpha-asc); }
    .#{$fa-css-prefix}-sort-alpha-desc:before { @include ext-declare-fa-var($fa-var-sort-alpha-desc); }
    .#{$fa-css-prefix}-sort-amount-asc:before { @include ext-declare-fa-var($fa-var-sort-amount-asc); }
    .#{$fa-css-prefix}-sort-amount-desc:before { @include ext-declare-fa-var($fa-var-sort-amount-desc); }
    .#{$fa-css-prefix}-sort-asc:before { @include ext-declare-fa-var($fa-var-sort-asc); }
    .#{$fa-css-prefix}-sort-desc:before { @include ext-declare-fa-var($fa-var-sort-desc); }
    .#{$fa-css-prefix}-sort-numeric-asc:before { @include ext-declare-fa-var($fa-var-sort-numeric-asc); }
    .#{$fa-css-prefix}-sort-numeric-desc:before { @include ext-declare-fa-var($fa-var-sort-numeric-desc); }
    .#{$fa-css-prefix}-spoon:before { @include ext-declare-fa-var($fa-var-spoon); }
    .#{$fa-css-prefix}-square-o:before { @include ext-declare-fa-var($fa-var-square-o); }
    .#{$fa-css-prefix}-star-half-empty:before { @include ext-declare-fa-var($fa-var-star-half-empty); }
    .#{$fa-css-prefix}-star-half-full:before { @include ext-declare-fa-var($fa-var-star-half-full); }
    .#{$fa-css-prefix}-star-half-o:before { @include ext-declare-fa-var($fa-var-star-half-o); }
    .#{$fa-css-prefix}-star-o:before { @include ext-declare-fa-var($fa-var-star-o); }
    .#{$fa-css-prefix}-sticky-note-o:before { @include ext-declare-fa-var($fa-var-sticky-note-o); }
    .#{$fa-css-prefix}-stop-circle-o:before { @include ext-declare-fa-var($fa-var-stop-circle-o); }
    .#{$fa-css-prefix}-sun-o:before { @include ext-declare-fa-var($fa-var-sun-o); }
    .#{$fa-css-prefix}-support:before { @include ext-declare-fa-var($fa-var-support); }
    .#{$fa-css-prefix}-tablet:before { @include ext-declare-fa-var($fa-var-tablet); }
    .#{$fa-css-prefix}-tachometer:before { @include ext-declare-fa-var($fa-var-tachometer); }
    .#{$fa-css-prefix}-television:before { @include ext-declare-fa-var($fa-var-television); }
    .#{$fa-css-prefix}-thermometer-0:before { @include ext-declare-fa-var($fa-var-thermometer-0); }
    .#{$fa-css-prefix}-thermometer-1:before { @include ext-declare-fa-var($fa-var-thermometer-1); }
    .#{$fa-css-prefix}-thermometer-2:before { @include ext-declare-fa-var($fa-var-thermometer-2); }
    .#{$fa-css-prefix}-thermometer-3:before { @include ext-declare-fa-var($fa-var-thermometer-3); }
    .#{$fa-css-prefix}-thermometer-4:before { @include ext-declare-fa-var($fa-var-thermometer-4); }
    .#{$fa-css-prefix}-thermometer:before { @include ext-declare-fa-var($fa-var-thermometer); }
    .#{$fa-css-prefix}-thumb-tack:before { @include ext-declare-fa-var($fa-var-thumb-tack); }
    .#{$fa-css-prefix}-thumbs-o-down:before { @include ext-declare-fa-var($fa-var-thumbs-o-down); }
    .#{$fa-css-prefix}-thumbs-o-up:before { @include ext-declare-fa-var($fa-var-thumbs-o-up); }
    .#{$fa-css-prefix}-ticket:before { @include ext-declare-fa-var($fa-var-ticket); }
    .#{$fa-css-prefix}-times-circle-o:before { @include ext-declare-fa-var($fa-var-times-circle-o); }
    .#{$fa-css-prefix}-times-rectangle-o:before { @include ext-declare-fa-var($fa-var-times-rectangle-o); }
    .#{$fa-css-prefix}-times-rectangle:before { @include ext-declare-fa-var($fa-var-times-rectangle); }
    .#{$fa-css-prefix}-toggle-down:before { @include ext-declare-fa-var($fa-var-toggle-down); }
    .#{$fa-css-prefix}-toggle-left:before { @include ext-declare-fa-var($fa-var-toggle-left); }
    .#{$fa-css-prefix}-toggle-right:before { @include ext-declare-fa-var($fa-var-toggle-right); }
    .#{$fa-css-prefix}-toggle-up:before { @include ext-declare-fa-var($fa-var-toggle-up); }
    .#{$fa-css-prefix}-trash-o:before { @include ext-declare-fa-var($fa-var-trash-o); }
    .#{$fa-css-prefix}-trash:before { @include ext-declare-fa-var($fa-var-trash); }
    .#{$fa-css-prefix}-try:before { @include ext-declare-fa-var($fa-var-try); }
    .#{$fa-css-prefix}-turkish-lira:before { @include ext-declare-fa-var($fa-var-turkish-lira); }
    .#{$fa-css-prefix}-unsorted:before { @include ext-declare-fa-var($fa-var-unsorted); }
    .#{$fa-css-prefix}-usd:before { @include ext-declare-fa-var($fa-var-usd); }
    .#{$fa-css-prefix}-user-circle-o:before { @include ext-declare-fa-var($fa-var-user-circle-o); }
    .#{$fa-css-prefix}-user-o:before { @include ext-declare-fa-var($fa-var-user-o); }
    .#{$fa-css-prefix}-vcard-o:before { @include ext-declare-fa-var($fa-var-vcard-o); }
    .#{$fa-css-prefix}-vcard:before { @include ext-declare-fa-var($fa-var-vcard); }
    .#{$fa-css-prefix}-video-camera:before { @include ext-declare-fa-var($fa-var-video-camera); }
    .#{$fa-css-prefix}-vimeo:before { @include ext-declare-fa-var($fa-var-vimeo); }
    .#{$fa-css-prefix}-volume-control-phone:before { @include ext-declare-fa-var($fa-var-volume-control-phone); }
    .#{$fa-css-prefix}-warning:before { @include ext-declare-fa-var($fa-var-warning); }
    .#{$fa-css-prefix}-wechat:before { @include ext-declare-fa-var($fa-var-wechat); }
    .#{$fa-css-prefix}-wheelchair-alt:before { @include ext-declare-fa-var($fa-var-wheelchair-alt); }
    .#{$fa-css-prefix}-window-close-o:before { @include ext-declare-fa-var($fa-var-window-close-o); }
    .#{$fa-css-prefix}-won:before { @include ext-declare-fa-var($fa-var-won); }
    .#{$fa-css-prefix}-y-combinator-square:before { @include ext-declare-fa-var($fa-var-y-combinator-square); }
    .#{$fa-css-prefix}-yc-square:before { @include ext-declare-fa-var($fa-var-yc-square); }
    .#{$fa-css-prefix}-yc:before { @include ext-declare-fa-var($fa-var-yc); }
    .#{$fa-css-prefix}-yen:before { @include ext-declare-fa-var($fa-var-yen); }
    .#{$fa-css-prefix}-youtube-play:before { @include ext-declare-fa-var($fa-var-youtube-play); }
    .#{$fa-css-prefix}-youtube-square:before { @include ext-declare-fa-var($fa-var-youtube-square); }




7. Edit /sass/etc/_variables.scss


  • Edit <project_home>/ext(framework_dir)/packages/font-awesome/sass/etc/_variables.scss as follows


  • Icon Name Changes Complete List as a reference, add blocks of the following to the end


    /sass/etc/_variables.scss

    // define vars used to use in older version to point to new vars
    
    $fa-var-address-book-o: $fa-var-address-book;
    $fa-var-address-card-o: $fa-var-address-card;
    $fa-var-area-chart: $fa-var-chart-area;
    $fa-var-arrow-circle-o-down: $fa-var-arrow-alt-circle-down;
    $fa-var-arrow-circle-o-left: $fa-var-arrow-alt-circle-left;
    $fa-var-arrow-circle-o-right: $fa-var-arrow-alt-circle-right;
    $fa-var-arrow-circle-o-up: $fa-var-arrow-alt-circle-up;
    $fa-var-arrows-alt: $fa-var-expand-arrows-alt;
    $fa-var-arrows-h: $fa-var-arrows-alt-h;
    $fa-var-arrows-v: $fa-var-arrows-alt-v;
    $fa-var-arrows: $fa-var-arrows-alt;
    $fa-var-asl-interpreting: $fa-var-american-sign-language-interpreting;
    $fa-var-automobile: $fa-var-car;
    $fa-var-bank: $fa-var-university;
    $fa-var-bar-chart-o: $fa-var-chart-bar;
    $fa-var-bar-chart: $fa-var-chart-bar;
    $fa-var-bathtub: $fa-var-bath;
    $fa-var-battery-0: $fa-var-battery-empty;
    $fa-var-battery-1: $fa-var-battery-quarter;
    $fa-var-battery-2: $fa-var-battery-half;
    $fa-var-battery-3: $fa-var-battery-three-quarters;
    $fa-var-battery-4: $fa-var-battery-full;
    $fa-var-battery: $fa-var-battery-full;
    $fa-var-bell-o: $fa-var-bell;
    $fa-var-bell-slash-o: $fa-var-bell-slash;
    $fa-var-bitbucket-square: $fa-var-bitbucket;
    $fa-var-bitcoin: $fa-var-btc;
    $fa-var-bookmark-o: $fa-var-bookmark;
    $fa-var-building-o: $fa-var-building;
    $fa-var-cab: $fa-var-taxi;
    $fa-var-calendar-check-o: $fa-var-calendar-check;
    $fa-var-calendar-minus-o: $fa-var-calendar-minus;
    $fa-var-calendar-o: $fa-var-calendar;
    $fa-var-calendar-plus-o: $fa-var-calendar-plus;
    $fa-var-calendar-times-o: $fa-var-calendar-times;
    $fa-var-calendar: $fa-var-calendar-alt;
    $fa-var-caret-square-o-down: $fa-var-caret-square-down;
    $fa-var-caret-square-o-left: $fa-var-caret-square-left;
    $fa-var-caret-square-o-right: $fa-var-caret-square-right;
    $fa-var-caret-square-o-up: $fa-var-caret-square-up;
    $fa-var-cc: $fa-var-closed-captioning;
    $fa-var-chain-broken: $fa-var-unlink;
    $fa-var-chain: $fa-var-link;
    $fa-var-check-circle-o: $fa-var-check-circle;
    $fa-var-check-square-o: $fa-var-check-square;
    $fa-var-circle-o-notch: $fa-var-circle-notch;
    $fa-var-circle-o: $fa-var-circle;
    $fa-var-circle-thin: $fa-var-circle;
    $fa-var-clock-o: $fa-var-clock;
    $fa-var-close: $fa-var-times;
    $fa-var-cloud-download: $fa-var-cloud-download-alt;
    $fa-var-cloud-upload: $fa-var-cloud-upload-alt;
    $fa-var-cny: $fa-var-yen-sign;
    $fa-var-code-fork: $fa-var-code-branch;
    $fa-var-comment-o: $fa-var-comment;
    $fa-var-commenting-o: $fa-var-comment-alt;
    $fa-var-commenting: $fa-var-comment-alt;
    $fa-var-comments-o: $fa-var-comments;
    $fa-var-credit-card-alt: $fa-var-credit-card;
    $fa-var-cutlery: $fa-var-utensils;
    $fa-var-dashboard: $fa-var-tachometer-alt;
    $fa-var-deafness: $fa-var-deaf;
    $fa-var-dedent: $fa-var-outdent;
    $fa-var-diamond: $fa-var-gem;
    $fa-var-dollar: $fa-var-dollar-sign;
    $fa-var-dot-circle-o: $fa-var-dot-circle;
    $fa-var-drivers-license-o: $fa-var-id-card;
    $fa-var-drivers-license: $fa-var-id-card;
    $fa-var-eercast: $fa-var-sellcast;
    $fa-var-envelope-o: $fa-var-envelope;
    $fa-var-envelope-open-o: $fa-var-envelope-open;
    $fa-var-eur: $fa-var-euro-sign;
    $fa-var-euro: $fa-var-euro-sign;
    $fa-var-exchange: $fa-var-exchange-alt;
    $fa-var-external-link-square: $fa-var-external-link-square-alt;
    $fa-var-external-link: $fa-var-external-link-alt;
    $fa-var-eyedropper: $fa-var-eye-dropper;
    $fa-var-fa: $fa-var-font-awesome;
    $fa-var-facebook-f: $fa-var-facebook-f;
    $fa-var-facebook-official: $fa-var-facebook;
    $fa-var-facebook: $fa-var-facebook-f;
    $fa-var-feed: $fa-var-rss;
    $fa-var-file-archive-o: $fa-var-file-archive;
    $fa-var-file-audio-o: $fa-var-file-audio;
    $fa-var-file-code-o: $fa-var-file-code;
    $fa-var-file-excel-o: $fa-var-file-excel;
    $fa-var-file-image-o: $fa-var-file-image;
    $fa-var-file-movie-o: $fa-var-file-video;
    $fa-var-file-o: $fa-var-file;
    $fa-var-file-pdf-o: $fa-var-file-pdf;
    $fa-var-file-photo-o: $fa-var-file-image;
    $fa-var-file-picture-o: $fa-var-file-image;
    $fa-var-file-powerpoint-o: $fa-var-file-powerpoint;
    $fa-var-file-sound-o: $fa-var-file-audio;
    $fa-var-file-text-o: $fa-var-file-alt;
    $fa-var-file-text: $fa-var-file-alt;
    $fa-var-file-video-o: $fa-var-file-video;
    $fa-var-file-word-o: $fa-var-file-word;
    $fa-var-file-zip-o: $fa-var-file-archive;
    $fa-var-files-o: $fa-var-copy;
    $fa-var-flag-o: $fa-var-flag;
    $fa-var-flash: $fa-var-bolt;
    $fa-var-floppy-o: $fa-var-save;
    $fa-var-folder-o: $fa-var-folder;
    $fa-var-folder-open-o: $fa-var-folder-open;
    $fa-var-frown-o: $fa-var-frown;
    $fa-var-futbol-o: $fa-var-futbol;
    $fa-var-gbp: $fa-var-pound-sign;
    $fa-var-ge: $fa-var-empire;
    $fa-var-gear: $fa-var-cog;
    $fa-var-gears: $fa-var-cogs;
    $fa-var-gittip: $fa-var-gratipay;
    $fa-var-glass: $fa-var-glass-martini;
    $fa-var-google-plus-circle: $fa-var-google-plus;
    $fa-var-google-plus-official: $fa-var-google-plus;
    $fa-var-google-plus: $fa-var-google-plus-g;
    $fa-var-group: $fa-var-users;
    $fa-var-hand-grab-o: $fa-var-hand-rock;
    $fa-var-hand-lizard-o: $fa-var-hand-lizard;
    $fa-var-hand-o-down: $fa-var-hand-point-down;
    $fa-var-hand-o-left: $fa-var-hand-point-left;
    $fa-var-hand-o-right: $fa-var-hand-point-right;
    $fa-var-hand-o-up: $fa-var-hand-point-up;
    $fa-var-hand-paper-o: $fa-var-hand-paper;
    $fa-var-hand-peace-o: $fa-var-hand-peace;
    $fa-var-hand-pointer-o: $fa-var-hand-pointer;
    $fa-var-hand-rock-o: $fa-var-hand-rock;
    $fa-var-hand-scissors-o: $fa-var-hand-scissors;
    $fa-var-hand-spock-o: $fa-var-hand-spock;
    $fa-var-hand-stop-o: $fa-var-hand-paper;
    $fa-var-handshake-o: $fa-var-handshake;
    $fa-var-hard-of-hearing: $fa-var-deaf;
    $fa-var-hdd-o: $fa-var-hdd;
    $fa-var-header: $fa-var-heading;
    $fa-var-heart-o: $fa-var-heart;
    $fa-var-hospital-o: $fa-var-hospital;
    $fa-var-hotel: $fa-var-bed;
    $fa-var-hourglass-1: $fa-var-hourglass-start;
    $fa-var-hourglass-2: $fa-var-hourglass-half;
    $fa-var-hourglass-3: $fa-var-hourglass-end;
    $fa-var-hourglass-o: $fa-var-hourglass;
    $fa-var-id-card-o: $fa-var-id-card;
    $fa-var-ils: $fa-var-shekel-sign;
    $fa-var-image: $fa-var-image;
    $fa-var-inr: $fa-var-rupee-sign;
    $fa-var-institution: $fa-var-university;
    $fa-var-intersex: $fa-var-transgender;
    $fa-var-jpy: $fa-var-yen-sign;
    $fa-var-keyboard-o: $fa-var-keyboard;
    $fa-var-krw: $fa-var-won-sign;
    $fa-var-legal: $fa-var-gavel;
    $fa-var-lemon-o: $fa-var-lemon;
    $fa-var-level-down: $fa-var-level-down-alt;
    $fa-var-level-up: $fa-var-level-up-alt;
    $fa-var-life-bouy: $fa-var-life-ring;
    $fa-var-life-buoy: $fa-var-life-ring;
    $fa-var-life-saver: $fa-var-life-ring;
    $fa-var-lightbulb-o: $fa-var-lightbulb;
    $fa-var-line-chart: $fa-var-chart-line;
    $fa-var-linkedin-square: $fa-var-linkedin;
    $fa-var-linkedin: $fa-var-linkedin-in;
    $fa-var-long-arrow-down: $fa-var-long-arrow-alt-down;
    $fa-var-long-arrow-left: $fa-var-long-arrow-alt-left;
    $fa-var-long-arrow-right: $fa-var-long-arrow-alt-right;
    $fa-var-long-arrow-up: $fa-var-long-arrow-alt-up;
    $fa-var-mail-forward: $fa-var-share;
    $fa-var-mail-reply-all: $fa-var-reply-all;
    $fa-var-mail-reply: $fa-var-reply;
    $fa-var-map-marker: $fa-var-map-marker-alt;
    $fa-var-map-o: $fa-var-map;
    $fa-var-meanpath: $fa-var-font-awesome;
    $fa-var-meh-o: $fa-var-meh;
    $fa-var-minus-square-o: $fa-var-minus-square;
    $fa-var-mobile-phone: $fa-var-mobile-alt;
    $fa-var-mobile: $fa-var-mobile-alt;
    $fa-var-money: $fa-var-money-bill-alt;
    $fa-var-moon-o: $fa-var-moon;
    $fa-var-mortar-board: $fa-var-graduation-cap;
    $fa-var-navicon: $fa-var-bars;
    $fa-var-newspaper-o: $fa-var-newspaper;
    $fa-var-paper-plane-o: $fa-var-paper-plane;
    $fa-var-paste: $fa-var-clipboard;
    $fa-var-pause-circle-o: $fa-var-pause-circle;
    $fa-var-pencil-square-o: $fa-var-edit;
    $fa-var-pencil-square: $fa-var-pen-square;
    $fa-var-pencil: $fa-var-pencil-alt;
    $fa-var-photo: $fa-var-image;
    $fa-var-picture-o: $fa-var-image;
    $fa-var-pie-chart: $fa-var-chart-pie;
    $fa-var-play-circle-o: $fa-var-play-circle;
    $fa-var-plus-square-o: $fa-var-plus-square;
    $fa-var-question-circle-o: $fa-var-question-circle;
    $fa-var-ra: $fa-var-rebel;
    $fa-var-refresh: $fa-var-sync;
    $fa-var-remove: $fa-var-times;
    $fa-var-reorder: $fa-var-bars;
    $fa-var-repeat: $fa-var-redo;
    $fa-var-resistance: $fa-var-rebel;
    $fa-var-rmb: $fa-var-yen-sign;
    $fa-var-rotate-left: $fa-var-undo;
    $fa-var-rotate-right: $fa-var-redo;
    $fa-var-rouble: $fa-var-ruble-sign;
    $fa-var-rub: $fa-var-ruble-sign;
    $fa-var-ruble: $fa-var-ruble-sign;
    $fa-var-rupee: $fa-var-rupee-sign;
    $fa-var-s15: $fa-var-bath;
    $fa-var-scissors: $fa-var-cut;
    $fa-var-send-o: $fa-var-paper-plane;
    $fa-var-send: $fa-var-paper-plane;
    $fa-var-share-square-o: $fa-var-share-square;
    $fa-var-shekel: $fa-var-shekel-sign;
    $fa-var-sheqel: $fa-var-shekel-sign;
    $fa-var-shield: $fa-var-shield-alt;
    $fa-var-sign-in: $fa-var-sign-in-alt;
    $fa-var-sign-out: $fa-var-sign-out-alt;
    $fa-var-signing: $fa-var-sign-language;
    $fa-var-sliders: $fa-var-sliders-h;
    $fa-var-smile-o: $fa-var-smile;
    $fa-var-snowflake-o: $fa-var-snowflake;
    $fa-var-soccer-ball-o: $fa-var-futbol;
    $fa-var-sort-alpha-asc: $fa-var-sort-alpha-down;
    $fa-var-sort-alpha-desc: $fa-var-sort-alpha-up;
    $fa-var-sort-amount-asc: $fa-var-sort-amount-down;
    $fa-var-sort-amount-desc: $fa-var-sort-amount-up;
    $fa-var-sort-asc: $fa-var-sort-up;
    $fa-var-sort-desc: $fa-var-sort-down;
    $fa-var-sort-numeric-asc: $fa-var-sort-numeric-down;
    $fa-var-sort-numeric-desc: $fa-var-sort-numeric-up;
    $fa-var-spoon: $fa-var-utensil-spoon;
    $fa-var-square-o: $fa-var-square;
    $fa-var-star-half-empty: $fa-var-star-half;
    $fa-var-star-half-full: $fa-var-star-half;
    $fa-var-star-half-o: $fa-var-star-half;
    $fa-var-star-o: $fa-var-star;
    $fa-var-sticky-note-o: $fa-var-sticky-note;
    $fa-var-stop-circle-o: $fa-var-stop-circle;
    $fa-var-sun-o: $fa-var-sun;
    $fa-var-support: $fa-var-life-ring;
    $fa-var-tablet: $fa-var-tablet-alt;
    $fa-var-tachometer: $fa-var-tachometer-alt;
    $fa-var-television: $fa-var-tv;
    $fa-var-thermometer-0: $fa-var-thermometer-empty;
    $fa-var-thermometer-1: $fa-var-thermometer-quarter;
    $fa-var-thermometer-2: $fa-var-thermometer-half;
    $fa-var-thermometer-3: $fa-var-thermometer-three-quarters;
    $fa-var-thermometer-4: $fa-var-thermometer-full;
    $fa-var-thermometer: $fa-var-thermometer-full;
    $fa-var-thumb-tack: $fa-var-thumbtack;
    $fa-var-thumbs-o-down: $fa-var-thumbs-down;
    $fa-var-thumbs-o-up: $fa-var-thumbs-up;
    $fa-var-ticket: $fa-var-ticket-alt;
    $fa-var-times-circle-o: $fa-var-times-circle;
    $fa-var-times-rectangle-o: $fa-var-window-close;
    $fa-var-times-rectangle: $fa-var-window-close;
    $fa-var-toggle-down: $fa-var-caret-square-down;
    $fa-var-toggle-left: $fa-var-caret-square-left;
    $fa-var-toggle-right: $fa-var-caret-square-right;
    $fa-var-toggle-up: $fa-var-caret-square-up;
    $fa-var-trash-o: $fa-var-trash-alt;
    $fa-var-trash: $fa-var-trash-alt;
    $fa-var-try: $fa-var-lira-sign;
    $fa-var-turkish-lira: $fa-var-lira-sign;
    $fa-var-unsorted: $fa-var-sort;
    $fa-var-usd: $fa-var-dollar-sign;
    $fa-var-user-circle-o: $fa-var-user-circle;
    $fa-var-user-o: $fa-var-user;
    $fa-var-vcard-o: $fa-var-address-card;
    $fa-var-vcard: $fa-var-address-card;
    $fa-var-video-camera: $fa-var-video;
    $fa-var-vimeo: $fa-var-vimeo-v;
    $fa-var-volume-control-phone: $fa-var-phone-volume;
    $fa-var-warning: $fa-var-exclamation-triangle;
    $fa-var-wechat: $fa-var-weixin;
    $fa-var-wheelchair-alt: $fa-var-accessible-icon;
    $fa-var-window-close-o: $fa-var-window-close;
    $fa-var-won: $fa-var-won-sign;
    $fa-var-y-combinator-square: $fa-var-hacker-news;
    $fa-var-yc-square: $fa-var-hacker-news;
    $fa-var-yc: $fa-var-y-combinator;
    $fa-var-yen: $fa-var-yen-sign;
    $fa-var-youtube-play: $fa-var-youtube;
    $fa-var-youtube-square: $fa-var-youtube;




  • Add //# fashion directive of the following to the first line


    /sass/etc/_variables.scss

    //# fashion warn -elevation
    




  • Add //# fashion directive of the following to the last line


    /sass/etc/_variables.scss

    //# fashion warn +elevation
    




8. Edit fa-brands.scss, fa-regular.scss, fa-solid.scss in /sass/etc/ (I don't know if this step is necessary)



  • Add //# fashion directive to each file like this.


    fa-brands.scss

    //# fashion -inline    <- this line
    
    @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url('#{$fa-font-path}/fa-brands-400.eot');
    //# fashion +inline:eot <- this line
    //# fashion +inline:ttf <- this line
    src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
    ...




9. Run sencha app watch