Reduce FontAwesome icon font file size

[DeltaHF]

DeltaHF submitted a new resource:

Reduce FontAwesome icon font file size - Reduce your XenForo page load size by 350kB by only serving used icons

The default XenForo 2.1 theme includes the FontAwesome Pro icon collection. The icons are downloaded with the page as three separate .woff or .woff2 font files which include all 7,800+ FontAwesome icons, even though the XenForo theme uses only ~262 of these icons. This means that new visitors to your site download over 385kB of data, most of which is never used.

@arn and myself have identified the glyphs...

Read more about this resource...

 

[kick]

In fact, a resource does more harm than good. Developers of add-ons will also use icons and various fonts in their own way, and thus those who use it will not have icons displayed due to cut out icons. You don’t even have to go far for an example and take the same official gallery, which in the control panel adds an icon for its menu. This icon is named camera.

We are looking for an icon in the resource description and cannot find it. And accordingly, this is only the first problem, given that many people use the icon in the description of the add-on. And many add-ons use various icons. For users, this will cause even more problems. Such a solution will work as some kind of local use without any additions, but for another it will simply be harmful and force itself to be done each time. In addition, it will be necessary to reduce the template each time and hope that the developers will not change the icon in any place or add functionality that will use new icons that are not here.

 

[DeltaHF]

In fact, a resource does more harm than good. Developers of add-ons will also use icons and various fonts in their own way, and thus those who use it will not have icons displayed due to cut out icons. You don’t even have to go far for an example and take the same official gallery, which in the control panel adds an icon for its menu. This icon is named camera.
View attachment 224660
We are looking for an icon in the resource description and cannot find it. And accordingly, this is only the first problem, given that many people use the icon in the description of the add-on. And many add-ons use various icons. For users, this will cause even more problems. Such a solution will work as some kind of local use without any additions, but for another it will simply be harmful and force itself to be done each time. In addition, it will be necessary to reduce the template each time and hope that the developers will not change the icon in any place or add functionality that will use new icons that are not here.

That's exactly why I included these disclaimers at the top of the guide. I even state that it's "probably not" worth it.

Drawbacks and Pitfalls

• Although we have tried to ensure this method includes all the fonts used in the default XenForo theme, some may be missing. Use this at your own risk.
• If a glyph is missing, most browsers will display a small empty square.
• If you want to add an icon to your theme later, you will have to rebuild the font files again and repeat the following process. Most browsers will cache the old font file, so it might take a while for some visitors to see the new font file unless you take measures to force the browser to re-validate the file. You can force the font-files to be re-downloaded by adding an additional custom parameter to their src: URLs in core_fa.less.

Is This Worth It?

Probably not. If you don't understand exactly what this does, I would not recommend doing it. The reduced font set could cause problems in the future as XenForo makes use of new icons or as you change between different themes, and novice designers/developers may not understand what is causing the problem.

As with almost any effort to optimize performance, the increased complexity comes at the cost of additional maintenance and work. If you don't know how to do that, don't want to do that, or are not willing to do that for the performance gains, don't do it.

For those who are interested and willing to make that sacrifice, this guide is intended to provide them with the tools on how to get it done.

 

[briansol]

in response to my review, about cors-

Unmaintained - Reduce FontAwesome icon font file size - Reviews

xenforo.com

I've figured it out. It is possible to serve these from the cdn, but requires a hard-code template edit (or, someone could make a plugin i guess)

XF 2.1 - font awesome path change

I am attempting to offload the fa woff's to my cdn. I found the path in setup_fa.less and swapped out @fa-font-path: "styles/fonts/fa"; for @fa-font-path: "https://fonts.mydomain.com/fa"; where the fonts subdomain is a cname to aws cloudfront which sources from...

xenforo.com

 

[Anatoliy]

Thank you! Thank you! Thank you!

 

[arn]

If anyone uses UI.X. They include a materialdesign font but use a small amount of them

desiredGlyphNames = ['']
desiredGlyphUnicode = [0xf09a,0xf09b,0xf035,0xf045,0xf13D,0xf13E,0xf05d,0xf05f,0xf21a,0xf066,0xf0e6,0xf759,0xf0eb,0xf0c0,0xf0e3,0xf100,0xf5e0,0xf131,0xf135,0xf140,0xf141,0xf142,0xf143,0xf150,0xf191,0xf156,0xf615,0xf17d,0xf181,0xf4e1,0xf1c0,0xf697,0xf1da,0xf1e7,0xf3eb,0xf1ee,0xf167,0xf616,0xf207,0xf20c,0xf214,0xf219,0xf24b,0xf36a,0xf6da,0xf2bd,0xf128,0xf570,0xf625,0xf2da,0xf2dc,0xf36d,0xf2fa,0xf1ee,0xf2fc,0xf2fe,0xf5d2,0xf513,0xf339,0xf33b,0xf279,0xf34e,0xf33e,0xf306,0xf2e9,0xf35c,0xf35d,0xf35e,0xf35f,0xf360,0xf0f8,0xf28c,0xf372,0xf374,0xf498,0xf1b6,0xf653,0xf3cc,0xf219,0xf19b,0xf407,0xf415,0xf41f,0xf361,0xf27e,0xf43d,0xf43e,0xf4d0,0xf44d,0xf60d,0xf450,0xf14e,0xf45a,0xf029,0xf1df,0xf46b,0xf193,0xf349,0xf016,0xf34b,0xf493,0xf497,0xf110,0xf4ba,0xf4c0,0xf0fe,0xf4c7,0xf4ce,0xf4d2,0xf4d0,0xf127,0xf4d3,0xf403,0xf4fb,0xf522,0xf521,0xf538,0xf541,0xf543,0xf544,0xf511,0xf33f,0xf552,0xf004,0xf00e,0xf567,0xf577,0xf026,0xf026,0xf208,0xf59f,0xf17d,0xf5a3,0xf5c3]
font = fontforge.activeFont()

for glyph in list(font.selection.byGlyphs):
  glyphNotUsed = (glyph.glyphname not in desiredGlyphNames) and (glyph.unicode not in desiredGlyphUnicode)
  if glyphNotUsed:
    glyph.clear()

That is the python script to reduce it.

 

[arn]

For stock xf, looks like you also need

'align-center','align-right'

in that list

and in the css

.@{fa-css-prefix}-align-center:before { content: @fa-var-align-center; }
.@{fa-css-prefix}-align-right:before { content: @fa-var-align-right; }

 

[DeltaHF]

DeltaHF updated Reduce FontAwesome icon font file size with a new update entry:

Icon references added, additional instructions

Added align-center and align-right to the default icon list in the Python and CSS.

Added instructions to modify the setup_fa.less template file to force the new font files to be downloaded by visitor's browsers.

Read the rest of this update entry...

 

[arn]

I did a quick download test using simulated 3G connection and android. Note there are ads running on this page, so some variance could be good/bad ads. But still...

Normal font files:

https://www.webpagetest.org/result/200602_7G_b9300801f0dd0c3299de4ff1ed34ac66/1/details/#waterfall_view_step1

First Contentful Paint: 9.59s
Total Page size: 2,136KB

Reduced FA and Material fonts and css:

https://www.webpagetest.org/result/200602_BB_89a13d9edcad529805408a209f0a5c60/1/details/#waterfall_view_step1

First Contentful Paint: 3.98s
Total Page size: 1893KB

 

[dethfire]

This is absolutely worth it. Font files account for over 50% of resources loaded even on stock XF! Google has said page speed is a ranking factor.

 

[dethfire]

Went from fonts being 56% of loading resources to 8%!

 

[dethfire]

If we aren't using .fad can we remove those from core_fa.less too?

 

[Kirby]

This is in an interesting idea

I've got a proof-of-concept Add-on almost finished that will largely automate the whole process, eg. there will be a single CLI command to scan the database and PHP files and afterwards generate minimized files using pytfsubset which should be available via packager manager (apt, rpm, etc.) on most linux distributions.

It will also come with an option to either completely replace the existing font-face and icon definitions (reducing the CSS as well) or to add additional fonts with just the detected/selected icons.
This approach does not reduce the CSS size (it even does increase it), but does make sure that no icon would ever be missing.

 

[Anatoliy]

Went from fonts being 56% of loading resources to 8%!

now let's beg DeltaHF to make the same miracle with unused css & js )

 

[Chromaniac]

Probably late to the party. Noticed this just now. Thanks for this resource!



from the source align-justify,arrows-alt,exchange

 

[arn]

Probably late to the party. Noticed this just now. Thanks for this resource!

View attachment 226767

from the source align-justify,arrows-alt,exchange

Where are you seeing this? Is this stock Xenforo? I don't see it here.

 

[Chromaniac]

when you click on an attachment in editor. this toolbar appears to let you add alt-text, replace image etc.

 

[DeltaHF]

DeltaHF updated Reduce FontAwesome icon font file size with a new update entry:

Added missing icons

Added align-justify, arrows-alt, and exchange. Thank you @OperaManiac for the tip.

Read the rest of this update entry...

 

[arn]

If we aren't using .fad can we remove those from core_fa.less too?

Here are the stock .fad ones you can use to replace the whole block. It includes the 3 new ones (now 4) that @OperaManiac mentioned.

.fad.@{fa-css-prefix}-align-center:after { content: "\10f037"; }
.fad.@{fa-css-prefix}-align-justify:after { content: "\10f039"; }
.fad.@{fa-css-prefix}-align-left:after { content: "\10f036"; }
.fad.@{fa-css-prefix}-align-right:after { content: "\10f038"; }
.fad.@{fa-css-prefix}-angle-down:after { content: "\10f107"; }
.fad.@{fa-css-prefix}-angle-left:after { content: "\10f104"; }
.fad.@{fa-css-prefix}-angle-right:after { content: "\10f105"; }
.fad.@{fa-css-prefix}-angle-up:after { content: "\10f106"; }
.fad.@{fa-css-prefix}-arrow-circle-up:after { content: "\10f0aa"; }
.fad.@{fa-css-prefix}-arrow-down:after { content: "\10f063"; }
.fad.@{fa-css-prefix}-arrow-left:after { content: "\10f060"; }
.fad.@{fa-css-prefix}-arrow-up:after { content: "\10f062"; }
.fad.@{fa-css-prefix}-arrows-alt:after { content: "\10f0b2"; }
.fad.@{fa-css-prefix}-asterisk:after { content: "\10f069"; }
.fad.@{fa-css-prefix}-backward:after { content: "\10f04a"; }
.fad.@{fa-css-prefix}-balance-scale:after { content: "\10f24e"; }
.fad.@{fa-css-prefix}-ban:after { content: "\10f05e"; }
.fad.@{fa-css-prefix}-bars:after { content: "\10f0c9"; }
.fad.@{fa-css-prefix}-bell:after { content: "\10f0f3"; }
.fad.@{fa-css-prefix}-bell-slash:after { content: "\10f1f6"; }
.fad.@{fa-css-prefix}-bold:after { content: "\10f032"; }
.fad.@{fa-css-prefix}-bolt:after { content: "\10f0e7"; }
.fad.@{fa-css-prefix}-bookmark:after { content: "\10f02e"; }
.fad.@{fa-css-prefix}-bug:after { content: "\10f188"; }
.fad.@{fa-css-prefix}-bullhorn:after { content: "\10f0a1"; }
.fad.@{fa-css-prefix}-calendar:after { content: "\10f133"; }
.fad.@{fa-css-prefix}-caret-down:after { content: "\10f0d7"; }
.fad.@{fa-css-prefix}-caret-left:after { content: "\10f0d9"; }
.fad.@{fa-css-prefix}-caret-right:after { content: "\10f0da"; }
.fad.@{fa-css-prefix}-chart-bar:after { content: "\10f080"; }
.fad.@{fa-css-prefix}-check:after { content: "\10f00c"; }
.fad.@{fa-css-prefix}-check-circle:after { content: "\10f058"; }
.fad.@{fa-css-prefix}-check-square:after { content: "\10f14a"; }
.fad.@{fa-css-prefix}-chevron-down:after { content: "\10f078"; }
.fad.@{fa-css-prefix}-chevron-left:after { content: "\10f053"; }
.fad.@{fa-css-prefix}-chevron-right:after { content: "\10f054"; }
.fad.@{fa-css-prefix}-chevron-up:after { content: "\10f077"; }
.fad.@{fa-css-prefix}-circle:after { content: "\10f111"; }
.fad.@{fa-css-prefix}-clock:after { content: "\10f017"; }
.fad.@{fa-css-prefix}-code:after { content: "\10f121"; }
.fad.@{fa-css-prefix}-cog:after { content: "\10f013"; }
.fad.@{fa-css-prefix}-cogs:after { content: "\10f085"; }
.fad.@{fa-css-prefix}-columns:after { content: "\10f0db"; }
.fad.@{fa-css-prefix}-comment-alt:after { content: "\10f27a"; }
.fad.@{fa-css-prefix}-comments:after { content: "\10f086"; }
.fad.@{fa-css-prefix}-compress:after { content: "\10f066"; }
.fad.@{fa-css-prefix}-copy:after { content: "\10f0c5"; }
.fad.@{fa-css-prefix}-credit-card:after { content: "\10f09d"; }
.fad.@{fa-css-prefix}-dollar-sign:after { content: "\10f155"; }
.fad.@{fa-css-prefix}-download:after { content: "\10f019"; }
.fad.@{fa-css-prefix}-edit:after { content: "\10f044"; }
.fad.@{fa-css-prefix}-ellipsis-h:after { content: "\10f141"; }
.fad.@{fa-css-prefix}-ellipsis-h-alt:after { content: "\10f39b"; }
.fad.@{fa-css-prefix}-ellipsis-v-alt:after { content: "\10f39c"; }
.fad.@{fa-css-prefix}-envelope:after { content: "\10f0e0"; }
.fad.@{fa-css-prefix}-envelope-open:after { content: "\10f2b6"; }
.fad.@{fa-css-prefix}-eraser:after { content: "\10f12d"; }
.fad.@{fa-css-prefix}-euro-sign:after { content: "\10f153"; }
.fad.@{fa-css-prefix}-exchange:after { content: "\10f0ec"; }
.fad.@{fa-css-prefix}-exclamation-circle:after { content: "\10f06a"; }
.fad.@{fa-css-prefix}-exclamation-triangle:after { content: "\10f071"; }
.fad.@{fa-css-prefix}-expand:after { content: "\10f065"; }
.fad.@{fa-css-prefix}-external-link:after { content: "\10f08e"; }
.fad.@{fa-css-prefix}-eye:after { content: "\10f06e"; }
.fad.@{fa-css-prefix}-eye-slash:after { content: "\10f070"; }
.fad.@{fa-css-prefix}-file:after { content: "\10f15b"; }
.fad.@{fa-css-prefix}-file-alt:after { content: "\10f15c"; }
.fad.@{fa-css-prefix}-file-archive:after { content: "\10f1c6"; }
.fad.@{fa-css-prefix}-file-audio:after { content: "\10f1c7"; }
.fad.@{fa-css-prefix}-file-code:after { content: "\10f1c9"; }
.fad.@{fa-css-prefix}-file-excel:after { content: "\10f1c3"; }
.fad.@{fa-css-prefix}-file-pdf:after { content: "\10f1c1"; }
.fad.@{fa-css-prefix}-file-powerpoint:after { content: "\10f1c4"; }
.fad.@{fa-css-prefix}-file-video:after { content: "\10f1c8"; }
.fad.@{fa-css-prefix}-file-word:after { content: "\10f1c2"; }
.fad.@{fa-css-prefix}-fire-extinguisher:after { content: "\10f134"; }
.fad.@{fa-css-prefix}-flag:after { content: "\10f024"; }
.fad.@{fa-css-prefix}-flag-checkered:after { content: "\10f11e"; }
.fad.@{fa-css-prefix}-font:after { content: "\10f031"; }
.fad.@{fa-css-prefix}-forward:after { content: "\10f04e"; }
.fad.@{fa-css-prefix}-frown:after { content: "\10f119"; }
.fad.@{fa-css-prefix}-globe:after { content: "\10f0ac"; }
.fad.@{fa-css-prefix}-history:after { content: "\10f1da"; }
.fad.@{fa-css-prefix}-home:after { content: "\10f015"; }
.fad.@{fa-css-prefix}-hryvnia:after { content: "\10f6f2"; }
.fad.@{fa-css-prefix}-id-badge:after { content: "\10f2c1"; }
.fad.@{fa-css-prefix}-image:after { content: "\10f03e"; }
.fad.@{fa-css-prefix}-indent:after { content: "\10f03c"; }
.fad.@{fa-css-prefix}-info:after { content: "\10f129"; }
.fad.@{fa-css-prefix}-info-circle:after { content: "\10f05a"; }
.fad.@{fa-css-prefix}-italic:after { content: "\10f033"; }
.fad.@{fa-css-prefix}-key:after { content: "\10f084"; }
.fad.@{fa-css-prefix}-language:after { content: "\10f1ab"; }
.fad.@{fa-css-prefix}-life-ring:after { content: "\10f1cd"; }
.fad.@{fa-css-prefix}-link:after { content: "\10f0c1"; }
.fad.@{fa-css-prefix}-lira-sign:after { content: "\10f195"; }
.fad.@{fa-css-prefix}-list:after { content: "\10f03a"; }
.fad.@{fa-css-prefix}-list-ol:after { content: "\10f0cb"; }
.fad.@{fa-css-prefix}-list-ul:after { content: "\10f0ca"; }
.fad.@{fa-css-prefix}-lock:after { content: "\10f023"; }
.fad.@{fa-css-prefix}-map:after { content: "\10f279"; }
.fad.@{fa-css-prefix}-map-signs:after { content: "\10f277"; }
.fad.@{fa-css-prefix}-medkit:after { content: "\10f0fa"; }
.fad.@{fa-css-prefix}-microphone-slash:after { content: "\10f131"; }
.fad.@{fa-css-prefix}-minus:after { content: "\10f068"; }
.fad.@{fa-css-prefix}-minus-octagon:after { content: "\10f308"; }
.fad.@{fa-css-prefix}-newspaper:after { content: "\10f1ea"; }
.fad.@{fa-css-prefix}-object-group:after { content: "\10f247"; }
.fad.@{fa-css-prefix}-octagon:after { content: "\10f306"; }
.fad.@{fa-css-prefix}-outdent:after { content: "\10f03b"; }
.fad.@{fa-css-prefix}-paint-brush:after { content: "\10f1fc"; }
.fad.@{fa-css-prefix}-paper-plane:after { content: "\10f1d8"; }
.fad.@{fa-css-prefix}-paperclip:after { content: "\10f0c6"; }
.fad.@{fa-css-prefix}-pause-circle:after { content: "\10f28b"; }
.fad.@{fa-css-prefix}-pen:after { content: "\10f304"; }
.fad.@{fa-css-prefix}-play-circle:after { content: "\10f144"; }
.fad.@{fa-css-prefix}-plus:after { content: "\10f067"; }
.fad.@{fa-css-prefix}-plus-circle:after { content: "\10f055"; }
.fad.@{fa-css-prefix}-plus-square:after { content: "\10f0fe"; }
.fad.@{fa-css-prefix}-pound-sign:after { content: "\10f154"; }
.fad.@{fa-css-prefix}-power-off:after { content: "\10f011"; }
.fad.@{fa-css-prefix}-puzzle-piece:after { content: "\10f12e"; }
.fad.@{fa-css-prefix}-question-circle:after { content: "\10f059"; }
.fad.@{fa-css-prefix}-quote-left:after { content: "\10f10d"; }
.fad.@{fa-css-prefix}-quote-right:after { content: "\10f10e"; }
.fad.@{fa-css-prefix}-random:after { content: "\10f074"; }
.fad.@{fa-css-prefix}-redo:after { content: "\10f01e"; }
.fad.@{fa-css-prefix}-reply:after { content: "\10f3e5"; }
.fad.@{fa-css-prefix}-rss:after { content: "\10f09e"; }
.fad.@{fa-css-prefix}-ruble-sign:after { content: "\10f158"; }
.fad.@{fa-css-prefix}-rupee-sign:after { content: "\10f156"; }
.fad.@{fa-css-prefix}-save:after { content: "\10f0c7"; }
.fad.@{fa-css-prefix}-search:after { content: "\10f002"; }
.fad.@{fa-css-prefix}-search-minus:after { content: "\10f010"; }
.fad.@{fa-css-prefix}-search-plus:after { content: "\10f00e"; }
.fad.@{fa-css-prefix}-server:after { content: "\10f233"; }
.fad.@{fa-css-prefix}-share:after { content: "\10f064"; }
.fad.@{fa-css-prefix}-share-alt:after { content: "\10f1e0"; }
.fad.@{fa-css-prefix}-shekel-sign:after { content: "\10f20b"; }
.fad.@{fa-css-prefix}-shield:after { content: "\10f132"; }
.fad.@{fa-css-prefix}-sitemap:after { content: "\10f0e8"; }
.fad.@{fa-css-prefix}-sliders-h:after { content: "\10f1de"; }
.fad.@{fa-css-prefix}-smile:after { content: "\10f118"; }
.fad.@{fa-css-prefix}-sort:after { content: "\10f0dc"; }
.fad.@{fa-css-prefix}-spinner:after { content: "\10f110"; }
.fad.@{fa-css-prefix}-square:after { content: "\10f0c8"; }
.fad.@{fa-css-prefix}-star:after { content: "\10f005"; }
.fad.@{fa-css-prefix}-star-half:after { content: "\10f089"; }
.fad.@{fa-css-prefix}-strikethrough:after { content: "\10f0cc"; }
.fad.@{fa-css-prefix}-sync:after { content: "\10f021"; }
.fad.@{fa-css-prefix}-sync-alt:after { content: "\10f2f1"; }
.fad.@{fa-css-prefix}-table:after { content: "\10f0ce"; }
.fad.@{fa-css-prefix}-tachometer:after { content: "\10f0e4"; }
.fad.@{fa-css-prefix}-tags:after { content: "\10f02c"; }
.fad.@{fa-css-prefix}-tenge:after { content: "\10f7d7"; }
.fad.@{fa-css-prefix}-terminal:after { content: "\10f120"; }
.fad.@{fa-css-prefix}-text-height:after { content: "\10f034"; }
.fad.@{fa-css-prefix}-th:after { content: "\10f00a"; }
.fad.@{fa-css-prefix}-thermometer:after { content: "\10f491"; }
.fad.@{fa-css-prefix}-thermometer-half:after { content: "\10f2c9"; }
.fad.@{fa-css-prefix}-thumbs-up:after { content: "\10f164"; }
.fad.@{fa-css-prefix}-thumbtack:after { content: "\10f08d"; }
.fad.@{fa-css-prefix}-times:after { content: "\10f00d"; }
.fad.@{fa-css-prefix}-times-circle:after { content: "\10f057"; }
.fad.@{fa-css-prefix}-tint:after { content: "\10f043"; }
.fad.@{fa-css-prefix}-toggle-off:after { content: "\10f204"; }
.fad.@{fa-css-prefix}-toggle-on:after { content: "\10f205"; }
.fad.@{fa-css-prefix}-trash:after { content: "\10f1f8"; }
.fad.@{fa-css-prefix}-trash-alt:after { content: "\10f2ed"; }
.fad.@{fa-css-prefix}-underline:after { content: "\10f0cd"; }
.fad.@{fa-css-prefix}-undo:after { content: "\10f0e2"; }
.fad.@{fa-css-prefix}-unlock:after { content: "\10f09c"; }
.fad.@{fa-css-prefix}-upload:after { content: "\10f093"; }
.fad.@{fa-css-prefix}-user:after { content: "\10f007"; }
.fad.@{fa-css-prefix}-user-circle:after { content: "\10f2bd"; }
.fad.@{fa-css-prefix}-user-plus:after { content: "\10f234"; }
.fad.@{fa-css-prefix}-user-times:after { content: "\10f235"; }
.fad.@{fa-css-prefix}-users:after { content: "\10f0c0"; }
.fad.@{fa-css-prefix}-video:after { content: "\10f03d"; }
.fad.@{fa-css-prefix}-video-plus:after { content: "\10f4e1"; }
.fad.@{fa-css-prefix}-won-sign:after { content: "\10f159"; }
.fad.@{fa-css-prefix}-wrench:after { content: "\10f0ad"; }
.fad.@{fa-css-prefix}-yen-sign:after { content: "\10f157"; }

 

[arn]

updated .fa ones

.@{fa-css-prefix}-align-center:before { content: @fa-var-align-center; }
.@{fa-css-prefix}-align-justify:before { content: @fa-var-align-justify; }
.@{fa-css-prefix}-align-left:before { content: @fa-var-align-left; }
.@{fa-css-prefix}-align-right:before { content: @fa-var-align-right; }
.@{fa-css-prefix}-angle-down:before { content: @fa-var-angle-down; }
.@{fa-css-prefix}-angle-left:before { content: @fa-var-angle-left; }
.@{fa-css-prefix}-angle-right:before { content: @fa-var-angle-right; }
.@{fa-css-prefix}-angle-up:before { content: @fa-var-angle-up; }
.@{fa-css-prefix}-arrow-circle-up:before { content: @fa-var-arrow-circle-up; }
.@{fa-css-prefix}-arrow-down:before { content: @fa-var-arrow-down; }
.@{fa-css-prefix}-arrow-left:before { content: @fa-var-arrow-left; }
.@{fa-css-prefix}-arrow-up:before { content: @fa-var-arrow-up; }
.@{fa-css-prefix}-arrows-alt:before { content: @fa-var-arrows-alt; }
.@{fa-css-prefix}-asterisk:before { content: @fa-var-asterisk; }
.@{fa-css-prefix}-backward:before { content: @fa-var-backward; }
.@{fa-css-prefix}-balance-scale:before { content: @fa-var-balance-scale; }
.@{fa-css-prefix}-ban:before { content: @fa-var-ban; }
.@{fa-css-prefix}-bars:before { content: @fa-var-bars; }
.@{fa-css-prefix}-bell:before { content: @fa-var-bell; }
.@{fa-css-prefix}-bell-slash:before { content: @fa-var-bell-slash; }
.@{fa-css-prefix}-bold:before { content: @fa-var-bold; }
.@{fa-css-prefix}-bolt:before { content: @fa-var-bolt; }
.@{fa-css-prefix}-bookmark:before { content: @fa-var-bookmark; }
.@{fa-css-prefix}-bug:before { content: @fa-var-bug; }
.@{fa-css-prefix}-bullhorn:before { content: @fa-var-bullhorn; }
.@{fa-css-prefix}-calendar:before { content: @fa-var-calendar; }
.@{fa-css-prefix}-caret-down:before { content: @fa-var-caret-down; }
.@{fa-css-prefix}-caret-left:before { content: @fa-var-caret-left; }
.@{fa-css-prefix}-caret-right:before { content: @fa-var-caret-right; }
.@{fa-css-prefix}-chart-bar:before { content: @fa-var-chart-bar; }
.@{fa-css-prefix}-check:before { content: @fa-var-check; }
.@{fa-css-prefix}-check-circle:before { content: @fa-var-check-circle; }
.@{fa-css-prefix}-check-square:before { content: @fa-var-check-square; }
.@{fa-css-prefix}-chevron-down:before { content: @fa-var-chevron-down; }
.@{fa-css-prefix}-chevron-left:before { content: @fa-var-chevron-left; }
.@{fa-css-prefix}-chevron-right:before { content: @fa-var-chevron-right; }
.@{fa-css-prefix}-chevron-up:before { content: @fa-var-chevron-up; }
.@{fa-css-prefix}-circle:before { content: @fa-var-circle; }
.@{fa-css-prefix}-clock:before { content: @fa-var-clock; }
.@{fa-css-prefix}-code:before { content: @fa-var-code; }
.@{fa-css-prefix}-cog:before { content: @fa-var-cog; }
.@{fa-css-prefix}-cogs:before { content: @fa-var-cogs; }
.@{fa-css-prefix}-columns:before { content: @fa-var-columns; }
.@{fa-css-prefix}-comment-alt:before { content: @fa-var-comment-alt; }
.@{fa-css-prefix}-comments:before { content: @fa-var-comments; }
.@{fa-css-prefix}-compress:before { content: @fa-var-compress; }
.@{fa-css-prefix}-copy:before { content: @fa-var-copy; }
.@{fa-css-prefix}-credit-card:before { content: @fa-var-credit-card; }
.@{fa-css-prefix}-dollar-sign:before { content: @fa-var-dollar-sign; }
.@{fa-css-prefix}-download:before { content: @fa-var-download; }
.@{fa-css-prefix}-edit:before { content: @fa-var-edit; }
.@{fa-css-prefix}-ellipsis-h:before { content: @fa-var-ellipsis-h; }
.@{fa-css-prefix}-ellipsis-h-alt:before { content: @fa-var-ellipsis-h-alt; }
.@{fa-css-prefix}-ellipsis-v-alt:before { content: @fa-var-ellipsis-v-alt; }
.@{fa-css-prefix}-envelope:before { content: @fa-var-envelope; }
.@{fa-css-prefix}-envelope-open:before { content: @fa-var-envelope-open; }
.@{fa-css-prefix}-eraser:before { content: @fa-var-eraser; }
.@{fa-css-prefix}-euro-sign:before { content: @fa-var-euro-sign; }
.@{fa-css-prefix}-exchange:before { content: @fa-var-exchange; }
.@{fa-css-prefix}-exclamation-circle:before { content: @fa-var-exclamation-circle; }
.@{fa-css-prefix}-exclamation-triangle:before { content: @fa-var-exclamation-triangle; }
.@{fa-css-prefix}-expand:before { content: @fa-var-expand; }
.@{fa-css-prefix}-external-link:before { content: @fa-var-external-link; }
.@{fa-css-prefix}-eye:before { content: @fa-var-eye; }
.@{fa-css-prefix}-eye-slash:before { content: @fa-var-eye-slash; }
.@{fa-css-prefix}-facebook:before { content: @fa-var-facebook; }
.@{fa-css-prefix}-facebook-f:before { content: @fa-var-facebook-f; }
.@{fa-css-prefix}-file:before { content: @fa-var-file; }
.@{fa-css-prefix}-file-alt:before { content: @fa-var-file-alt; }
.@{fa-css-prefix}-file-archive:before { content: @fa-var-file-archive; }
.@{fa-css-prefix}-file-audio:before { content: @fa-var-file-audio; }
.@{fa-css-prefix}-file-code:before { content: @fa-var-file-code; }
.@{fa-css-prefix}-file-excel:before { content: @fa-var-file-excel; }
.@{fa-css-prefix}-file-pdf:before { content: @fa-var-file-pdf; }
.@{fa-css-prefix}-file-powerpoint:before { content: @fa-var-file-powerpoint; }
.@{fa-css-prefix}-file-video:before { content: @fa-var-file-video; }
.@{fa-css-prefix}-file-word:before { content: @fa-var-file-word; }
.@{fa-css-prefix}-fire-extinguisher:before { content: @fa-var-fire-extinguisher; }
.@{fa-css-prefix}-flag:before { content: @fa-var-flag; }
.@{fa-css-prefix}-flag-checkered:before { content: @fa-var-flag-checkered; }
.@{fa-css-prefix}-font:before { content: @fa-var-font; }
.@{fa-css-prefix}-forward:before { content: @fa-var-forward; }
.@{fa-css-prefix}-frown:before { content: @fa-var-frown; }
.@{fa-css-prefix}-github:before { content: @fa-var-github; }
.@{fa-css-prefix}-globe:before { content: @fa-var-globe; }
.@{fa-css-prefix}-history:before { content: @fa-var-history; }
.@{fa-css-prefix}-home:before { content: @fa-var-home; }
.@{fa-css-prefix}-hryvnia:before { content: @fa-var-hryvnia; }
.@{fa-css-prefix}-id-badge:before { content: @fa-var-id-badge; }
.@{fa-css-prefix}-image:before { content: @fa-var-image; }
.@{fa-css-prefix}-indent:before { content: @fa-var-indent; }
.@{fa-css-prefix}-info:before { content: @fa-var-info; }
.@{fa-css-prefix}-info-circle:before { content: @fa-var-info-circle; }
.@{fa-css-prefix}-italic:before { content: @fa-var-italic; }
.@{fa-css-prefix}-key:before { content: @fa-var-key; }
.@{fa-css-prefix}-language:before { content: @fa-var-language; }
.@{fa-css-prefix}-life-ring:before { content: @fa-var-life-ring; }
.@{fa-css-prefix}-link:before { content: @fa-var-link; }
.@{fa-css-prefix}-linkedin:before { content: @fa-var-linkedin; }
.@{fa-css-prefix}-lira-sign:before { content: @fa-var-lira-sign; }
.@{fa-css-prefix}-list:before { content: @fa-var-list; }
.@{fa-css-prefix}-list-ol:before { content: @fa-var-list-ol; }
.@{fa-css-prefix}-list-ul:before { content: @fa-var-list-ul; }
.@{fa-css-prefix}-lock:before { content: @fa-var-lock; }
.@{fa-css-prefix}-map:before { content: @fa-var-map; }
.@{fa-css-prefix}-map-signs:before { content: @fa-var-map-signs; }
.@{fa-css-prefix}-medkit:before { content: @fa-var-medkit; }
.@{fa-css-prefix}-microphone-slash:before { content: @fa-var-microphone-slash; }
.@{fa-css-prefix}-minus:before { content: @fa-var-minus; }
.@{fa-css-prefix}-minus-octagon:before { content: @fa-var-minus-octagon; }
.@{fa-css-prefix}-newspaper:before { content: @fa-var-newspaper; }
.@{fa-css-prefix}-object-group:before { content: @fa-var-object-group; }
.@{fa-css-prefix}-octagon:before { content: @fa-var-octagon; }
.@{fa-css-prefix}-outdent:before { content: @fa-var-outdent; }
.@{fa-css-prefix}-paint-brush:before { content: @fa-var-paint-brush; }
.@{fa-css-prefix}-paper-plane:before { content: @fa-var-paper-plane; }
.@{fa-css-prefix}-paperclip:before { content: @fa-var-paperclip; }
.@{fa-css-prefix}-pause-circle:before { content: @fa-var-pause-circle; }
.@{fa-css-prefix}-pen:before { content: @fa-var-pen; }
.@{fa-css-prefix}-pinterest-p:before { content: @fa-var-pinterest-p; }
.@{fa-css-prefix}-play-circle:before { content: @fa-var-play-circle; }
.@{fa-css-prefix}-plus:before { content: @fa-var-plus; }
.@{fa-css-prefix}-plus-circle:before { content: @fa-var-plus-circle; }
.@{fa-css-prefix}-plus-square:before { content: @fa-var-plus-square; }
.@{fa-css-prefix}-pound-sign:before { content: @fa-var-pound-sign; }
.@{fa-css-prefix}-power-off:before { content: @fa-var-power-off; }
.@{fa-css-prefix}-puzzle-piece:before { content: @fa-var-puzzle-piece; }
.@{fa-css-prefix}-question-circle:before { content: @fa-var-question-circle; }
.@{fa-css-prefix}-quote-left:before { content: @fa-var-quote-left; }
.@{fa-css-prefix}-quote-right:before { content: @fa-var-quote-right; }
.@{fa-css-prefix}-random:before { content: @fa-var-random; }
.@{fa-css-prefix}-reddit-alien:before { content: @fa-var-reddit-alien; }
.@{fa-css-prefix}-redo:before { content: @fa-var-redo; }
.@{fa-css-prefix}-reply:before { content: @fa-var-reply; }
.@{fa-css-prefix}-rss:before { content: @fa-var-rss; }
.@{fa-css-prefix}-ruble-sign:before { content: @fa-var-ruble-sign; }
.@{fa-css-prefix}-rupee-sign:before { content: @fa-var-rupee-sign; }
.@{fa-css-prefix}-save:before { content: @fa-var-save; }
.@{fa-css-prefix}-search:before { content: @fa-var-search; }
.@{fa-css-prefix}-search-minus:before { content: @fa-var-search-minus; }
.@{fa-css-prefix}-search-plus:before { content: @fa-var-search-plus; }
.@{fa-css-prefix}-server:before { content: @fa-var-server; }
.@{fa-css-prefix}-share:before { content: @fa-var-share; }
.@{fa-css-prefix}-share-alt:before { content: @fa-var-share-alt; }
.@{fa-css-prefix}-shekel-sign:before { content: @fa-var-shekel-sign; }
.@{fa-css-prefix}-shield:before { content: @fa-var-shield; }
.@{fa-css-prefix}-sitemap:before { content: @fa-var-sitemap; }
.@{fa-css-prefix}-sliders-h:before { content: @fa-var-sliders-h; }
.@{fa-css-prefix}-smile:before { content: @fa-var-smile; }
.@{fa-css-prefix}-sort:before { content: @fa-var-sort; }
.@{fa-css-prefix}-spinner:before { content: @fa-var-spinner; }
.@{fa-css-prefix}-square:before { content: @fa-var-square; }
.@{fa-css-prefix}-star:before { content: @fa-var-star; }
.@{fa-css-prefix}-star-half:before { content: @fa-var-star-half; }
.@{fa-css-prefix}-strikethrough:before { content: @fa-var-strikethrough; }
.@{fa-css-prefix}-sync:before { content: @fa-var-sync; }
.@{fa-css-prefix}-sync-alt:before { content: @fa-var-sync-alt; }
.@{fa-css-prefix}-table:before { content: @fa-var-table; }
.@{fa-css-prefix}-tachometer:before { content: @fa-var-tachometer; }
.@{fa-css-prefix}-tags:before { content: @fa-var-tags; }
.@{fa-css-prefix}-tenge:before { content: @fa-var-tenge; }
.@{fa-css-prefix}-terminal:before { content: @fa-var-terminal; }
.@{fa-css-prefix}-text-height:before { content: @fa-var-text-height; }
.@{fa-css-prefix}-th:before { content: @fa-var-th; }
.@{fa-css-prefix}-thermometer:before { content: @fa-var-thermometer; }
.@{fa-css-prefix}-thermometer-half:before { content: @fa-var-thermometer-half; }
.@{fa-css-prefix}-thumbs-up:before { content: @fa-var-thumbs-up; }
.@{fa-css-prefix}-thumbtack:before { content: @fa-var-thumbtack; }
.@{fa-css-prefix}-times:before { content: @fa-var-times; }
.@{fa-css-prefix}-times-circle:before { content: @fa-var-times-circle; }
.@{fa-css-prefix}-tint:before { content: @fa-var-tint; }
.@{fa-css-prefix}-toggle-off:before { content: @fa-var-toggle-off; }
.@{fa-css-prefix}-toggle-on:before { content: @fa-var-toggle-on; }
.@{fa-css-prefix}-trash:before { content: @fa-var-trash; }
.@{fa-css-prefix}-trash-alt:before { content: @fa-var-trash-alt; }
.@{fa-css-prefix}-tumblr:before { content: @fa-var-tumblr; }
.@{fa-css-prefix}-twitter:before { content: @fa-var-twitter; }
.@{fa-css-prefix}-underline:before { content: @fa-var-underline; }
.@{fa-css-prefix}-undo:before { content: @fa-var-undo; }
.@{fa-css-prefix}-unlock:before { content: @fa-var-unlock; }
.@{fa-css-prefix}-upload:before { content: @fa-var-upload; }
.@{fa-css-prefix}-user:before { content: @fa-var-user; }
.@{fa-css-prefix}-user-circle:before { content: @fa-var-user-circle; }
.@{fa-css-prefix}-user-plus:before { content: @fa-var-user-plus; }
.@{fa-css-prefix}-user-times:before { content: @fa-var-user-times; }
.@{fa-css-prefix}-users:before { content: @fa-var-users; }
.@{fa-css-prefix}-video:before { content: @fa-var-video; }
.@{fa-css-prefix}-video-plus:before { content: @fa-var-video-plus; }
.@{fa-css-prefix}-whatsapp:before { content: @fa-var-whatsapp; }
.@{fa-css-prefix}-windows:before { content: @fa-var-windows; }
.@{fa-css-prefix}-won-sign:before { content: @fa-var-won-sign; }
.@{fa-css-prefix}-wrench:before { content: @fa-var-wrench; }
.@{fa-css-prefix}-yahoo:before { content: @fa-var-yahoo; }
.@{fa-css-prefix}-yen-sign:before { content: @fa-var-yen-sign; }