Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@yamayamayamaji

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

More than 3 years have 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

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?