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/, exceptall.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.scssas 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.scssas 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.scssas 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.scssas 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
//# fashiondirective of the following to the first line/sass/etc/_variables.scss//# fashion warn -elevation -
Add
//# fashiondirective 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
//# fashiondirective 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'), ...