Reduce FontAwesome icon font file size

Reduce FontAwesome icon font file size

DeltaHF

Well-known member
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

Well-known member
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.
1589032690977.png
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

Well-known member
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

Well-known member
in response to my review, about cors-

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)
 

arn

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

Code:
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

Well-known member
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; }
 

arn

Well-known member
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:

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

Reduced FA and Material fonts and css:

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

dethfire

Well-known member
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.
 

Kirby

Well-known member
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.
 

arn

Well-known member
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.

Code:
.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"; }
 
Last edited:

arn

Well-known member
updated .fa ones

Code:
.@{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; }
 
Last edited:
Top