XF 2.1 Why font awesome files so big?

dethfire

dethfire

Well-known member
I've been looking to speed up my site and something I can't understand is why font awesome files are so massive. It seems like they've more than tripled in size the past few years. For example, ~30% of every XF.com forum page's overhead is due to loading the 3 font awesome files. That is crazy!

In XF1 my FA file size is only 70kb, now between the 3 is over 300kb!
 
Last edited:
Sort by date Sort by votes
OK, try this if you have a dev board. I just ran that list over fa-brands-400.woff2 and fa-regular-400.woff2 and put them in this zip file.

I didn't change any templates, I just replaced those files in the /styles/fonts/fa directory and did a hard reload.

EDIT: Just tried this on my test board with a default theme. Still a lot of missing characters, but it's a start!
 

Attachments

Last edited:
Upvote 0 Downvote
DeltaHF said:
OK, try this if you have a dev board. I just ran that list over fa-brands-400.woff2 and fa-regular-400.woff2 and put them in this zip file.

I didn't change any templates, I just replaced those files in the /styles/fonts/fa directory and did a hard reload.

EDIT: Just tried this on my test board with a default theme. Still a lot of missing characters, but it's a start!
Click to expand...

Thanks! I'll give it a go.

arn
 
Upvote 0 Downvote
ok... I think it's working.

  • fa-brands and fa-regular file sizes are tiny
  • Editor icons are all present
  • Facebook icon is missing. But that's because Xenforo uses facebook-f icon and I only included facebook icon in my list
  • That bell isn't in my list I posted, but it appears that lives in the solid font? Which we didn't replace. So that seems right.

I did see where I'm missing icons. There are a bunch of icons that are defined in the css and doesn't use the fa-XXX classes. So... maybe grepping those values out (first removing the master fa-icon index) would do it.

Screen Shot 2020-05-06 at 2.46.16 AM.png
 
Last edited:
Upvote 0 Downvote
@DeltaHF

Try this code. I was able to pull the unicode from the css... but rather than converting all those to fa names, the fontforge glyph structure has unicode... so I tweaked the python code.

So... hopefully this will work, but I couldn't easily test it.

This includes stock Xenforo font awesome. I pulled this from default theme CSS.

Code: 
desiredGlyphNames = ['eraser','bold','italic','underline','strikethrough','tint','font','text-height','link','image','video-plus','smile','video','quote-right','flag','flag-checkered','code','terminal','align-left','list-ol','list-ul','indent','outdent','table','undo','redo','save','cog','ellipsis-v-alt','ellipsis-h-alt','rss','twitter-square','facebook-square','arrow-up','rss','twitter-square','facebook-square','arrow-up','user','clock','share-alt','rss','twitter-square','facebook-square','arrow-up']
desiredGlyphUnicode = [0x00B7,0x00a0,0xe01a,0xe01d,0xe033,0xe070,0xe094,0xe095,0xe0f2,0xe1ff,0xe20c,0xe20d,0xe311,0xe312,0xe80d,0xe901,0xe902,0xe903,0xe904,0xf001,0xf002,0xf005,0xf007,0xf00a,0xf00c,0xf00d,0xf00e,0xf010,0xf011,0xf013,0xf019,0xf023,0xf02e,0xf03a,0xf03d,0xf03e,0xf044,0xf04a,0xf04e,0xf053,0xf054,0xf057,0xf058,0xf059,0xf05a,0xf05e,0xf064,0xf065,0xf066,0xf067,0xf068,0xf06a,0xf06e,0xf070,0xf071,0xf077,0xf078,0xf07c,0xf080,0xf086,0xf08c,0xf08d,0xf08e,0xf093,0xf099,0xf09a,0xf09b,0xf09c,0xf09d,0xf0aa,0xf0ac,0xf0c1,0xf0c5,0xf0c6,0xf0c7,0xf0c8,0xf0c9,0xf0d7,0xf0d9,0xf0da,0xf0dc,0xf0e0,0xf0e7,0xf0e8,0xf0f3,0xf0fe,0xf105,0xf107,0xf10d,0xf110,0xf111,0xf119,0xf131,0xf132,0xf133,0xf141,0xf144,0xf14a,0xf15b,0xf15c,0xf164,0xf167,0xf173,0xf17a,0xf19e,0xf1c1,0xf1c2,0xf1c3,0xf1c4,0xf1c6,0xf1c7,0xf1c8,0xf1c9,0xf1da,0xf1e0,0xf1f6,0xf1f8,0xf204,0xf205,0xf231,0xf232,0xf234,0xf235,0xf281,0xf28b,0xf2bd,0xf2ed,0xf2f1,0xf39e,0xf3e5]
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()
make sure the tabbing remains. Apparently that's how python decides what's in the for loop.

Edit: made some edits to the code.

Edit 2: I'm hoping font awesome didn't duplicate use of unicode between their font libraries. Since these are all mixed together. I guesss you'll have to run through each font (regular, solid,brand) through this filter.

Edit 3: pretty sure this works
 
Last edited:
Upvote 0 Downvote
Wow, nice work @arn. I think we have just about cracked this. It's starting to get exciting now.

I used your list and found just four icons missing (tags, paint-brush, users, and the '\f304' pencil icon). This is the script in its current form (and yes you are correct about the tabs in Python):

Python: 
desiredGlyphNames = ['tags','paint-brush','users','eraser','bold','italic','underline','strikethrough','tint','font','text-height','link','image','video-plus','smile','video','quote-right','flag','flag-checkered','code','terminal','align-left','list-ol','list-ul','indent','outdent','table','undo','redo','save','cog','ellipsis-v-alt','ellipsis-h-alt','rss','twitter-square','facebook-square','arrow-up','rss','twitter-square','facebook-square','arrow-up','user','clock','share-alt','rss','twitter-square','facebook-square','arrow-up']
desiredGlyphUnicode = [0xf304,0x00B7,0x00a0,0xe01a,0xe01d,0xe033,0xe070,0xe094,0xe095,0xe0f2,0xe1ff,0xe20c,0xe20d,0xe311,0xe312,0xe80d,0xe901,0xe902,0xe903,0xe904,0xf001,0xf002,0xf005,0xf007,0xf00a,0xf00c,0xf00d,0xf00e,0xf010,0xf011,0xf013,0xf019,0xf023,0xf02e,0xf03a,0xf03d,0xf03e,0xf044,0xf04a,0xf04e,0xf053,0xf054,0xf057,0xf058,0xf059,0xf05a,0xf05e,0xf064,0xf065,0xf066,0xf067,0xf068,0xf06a,0xf06e,0xf070,0xf071,0xf077,0xf078,0xf07c,0xf080,0xf086,0xf08c,0xf08d,0xf08e,0xf093,0xf099,0xf09a,0xf09b,0xf09c,0xf09d,0xf0aa,0xf0ac,0xf0c1,0xf0c5,0xf0c6,0xf0c7,0xf0c8,0xf0c9,0xf0d7,0xf0d9,0xf0da,0xf0dc,0xf0e0,0xf0e7,0xf0e8,0xf0f3,0xf0fe,0xf105,0xf107,0xf10d,0xf110,0xf111,0xf119,0xf131,0xf132,0xf133,0xf141,0xf144,0xf14a,0xf15b,0xf15c,0xf164,0xf167,0xf173,0xf17a,0xf19e,0xf1c1,0xf1c2,0xf1c3,0xf1c4,0xf1c6,0xf1c7,0xf1c8,0xf1c9,0xf1da,0xf1e0,0xf1f6,0xf1f8,0xf204,0xf205,0xf231,0xf232,0xf234,0xf235,0xf281,0xf28b,0xf2bd,0xf2ed,0xf2f1,0xf39e,0xf3e5]
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()

I can't find any more missing icons on my dev board with the default theme, and the three .woff2 font files total just 23KB in size. This is a 94% reduction in file size for the fonts, and for a sample text-only thread on my dev board, it reduced overall page download size by 37% (1.1MB to 690KB).

Download the new font files in this zip file and see how it looks for you.

I am not running the Resource Manager or Media Gallery on my dev board. Do they use any unique icons that aren't already used in XenForo?

If we can get a few more people to test this out and confirm I will run the script on the rest of the files. I can also publish this as a resource with instructions on how to customize the font files for those using more icons in their custom themes.
 

Attachments

Upvote 0 Downvote
nice! if you really wanted to be complete, you could also remove all the unneeded CSS declarations in

setup_fa.less
core_fa.less

edit: all the css declarations combined look to be about 169k (minimized)
 
Upvote 0 Downvote
Oh wait, it looks like there are a lot more icons used in the Admin area. I'll have to review those.

I just checked the CSS and removed all the declarations from core_fa.less as a rough test to see what kinds of savings we are talking about. Looks like we can get the big CSS file down to ~47KB from 86KB. setup_fa.less just defines the variables and is not sent to the browser so we don't have to worry about that one.
 
Upvote 0 Downvote
hmm... to really do it right.

A script to scan all .less templates (except core_fa.less) for unicodes and scan all non .less templates for "fa-XXX" patterns.

If I have time tonight, I'll mess with it.

arn
 
Upvote 0 Downvote
Yeah, or a script which we could run core_fa.less and the desiredGlyphNames array through and have it automatically strip the unused icon declarations. :D

I'm working on the Admin area icons now. Didn't realize how many were hiding in there.

EDIT: OK, here's the latest version with all the admin icons for anyone to try.
 

Attachments

Last edited:
Upvote 0 Downvote
ok, first attempt

Code: 
cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo 'fa-([a-z0-9\-]+)' | grep -v "fa--" | grep -v -E 'fa-light-300|fa-brands-400|fa-regular-400|fa-solid-900' | sed 's/fa-var-/fa-/g' | sort | uniq | tr '\n' ',' | sed 's/fa-//g' 

cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo '\\([a-fA-F0-9]+){4}'  | sort | uniq | tr '\n' ',' | sed 's/\\/0x/g'

find . -name '*.php' -exec cat {} \; | grep -Eo 'fa-([a-z0-9\-]+)' | grep -v 'fa-1f1' | grep -v 'fa-fe0f' | grep -v 'fa--' | sort | uniq | tr '\n' ',' | sed 's/fa-//g'

output

Code: 
2x,3x,address-card-o,angle-down,angle-left,angle-right,angle-up,arrow-circle-up,arrow-down,arrow-up,asterisk,backward,balance-scale,ban,bars,bell,bell-slash,bolt,bookmark,bug,bullhorn,calendar,caret-down,caret-left,caret-right,chart-bar,check,check-circle,check-square,chevron-down,chevron-left,chevron-right,chevron-up,circle,clock,code,cog,cogs,columns,comment-alt,comments,compress,copy,credit-card,download,edit,envelope,envelope-open,exclamation-circle,exclamation-triangle,expand,external-link,eye,eye-slash,facebook,facebook-f,facebook-official,file,file-alt,file-archive,file-audio,file-code,file-excel,file-pdf,file-powerpoint,file-video,file-word,fire-extinguisher,forward,frown,fw,github,globe,history,home,id-badge,image,info,info-circle,key,language,lg,life-ring,link,linkedin,list,lock,map,map-signs,medkit,microphone-slash,minus,minus-octagon,newspaper,object-group,paint-brush,paper-plane,paperclip,pause-circle,pen,pinterest-p,pinterest-square,play-circle,plus,plus-circle,plus-square,power-off,pulse,puzzle-piece,question-circle,quote-left,random,reddit-alien,reply,rss,save,search,search-minus,search-plus,server,share,share-alt,shield,sitemap,sliders-h,sort,spin,spinner,square,star,star-half,sync,sync-alt,tachometer,tags,th,thermometer-half,thumbs-up,thumbtack,times,times-circle,toggle-off,toggle-on,trash,trash-alt,tumblr,twitter,unlock,upload,user,user-circle,user-plus,user-times,users,video,whatsapp,windows,wrench,yahoo,

0x00A0,0x00B7,0x00a0,0xFaceb,0xFeed,0xFeede,0xe01a,0xe01d,0xe033,0xe070,0xe094,0xe095,0xe0f2,0xe1ff,0xe20c,0xe20d,0xe311,0xe312,0xe80d,0xe901,0xe902,0xe903,0xe904,0xf101,0xf102,0xf103,0xf104,0xf105,0xf106,0xf107,0xf108,0xf109,0xf10a,0xf10b,0xf10c,0xf10d,0xf10e,0xf10f,0xf110,0xf111,0xf112,0xf113,0xf114,0xf115,0xf116,0xf117,0xf118,0xf119,0xf11a,0xf11b,0xf11c,0xf11d,0xf11e

align-left,bold,code,cog,dollar-sign,ellipsis-h,ellipsis-h-alt,ellipsis-v-alt,eraser,euro-sign,exclamation-triangle,file-alt,flag,flag-checkered,font,fw,hryvnia,image,indent,info-circle,italic,lg,link,lira-sign,list,list-ol,list-ul,lock,outdent,pound-sign,question-circle,quote-right,redo,ruble-sign,rupee-sign,save,shekel-sign,smile,strikethrough,table,tenge,terminal,text-height,tint,underline,undo,video,video-plus,won-sign,yen-sign

run it from your xenforo package download directory

That should be everything from the standard Xenforo install. Could be a mistake somewhere. But it hits templates, css, and php files to look for references to font awesome fonts. Scanning other 3rd party templates should be easy to do too.

arn

edit: removed the "fa-" prefixes
 
Last edited:
Upvote 0 Downvote
Nice! That definitely picked up some extra icons we had missed, but oddly, it was missing the icons that only appeared in the Admin CP.

I have combined them all into this current version of the script:

Python: 
desiredGlyphNames = ['2x','3x','address-card-o','angle-down','angle-left','angle-right','angle-up','arrow-circle-up','arrow-down','arrow-up','backward','ban','bars','bell','bell-slash','bolt','bookmark','bullhorn','calendar','caret-down','caret-left','caret-right','chart-bar','check','check-circle','check-square','chevron-down','chevron-left','chevron-right','chevron-up','circle','clock','cog','cogs','comments','compress','copy','credit-card','download','edit','envelope','exclamation-circle','exclamation-triangle','expand','external-link','eye','eye-slash','facebook','facebook-f','file','file-alt','file-archive','file-audio','file-code','file-excel','file-pdf','file-powerpoint','file-video','file-word','forward','frown','fw','github','globe','history','home','id-badge','info-circle','key','lg','link','linkedin','list','lock','microphone-slash','minus','paint-brush','paperclip','pause-circle','pen','pinterest-p','play-circle','plus','plus-circle','plus-square','power-off','pulse','puzzle-piece','question-circle','quote-left','reddit-alien','reply','rss','save','search','search-minus','search-plus','share','share-alt','shield','sitemap','sort','spin','spinner','square','star','star-half','sync','sync-alt','tags','th','thumbs-up','thumbtack','times','times-circle','toggle-off','toggle-on','trash','trash-alt','tumblr','twitter','unlock','upload','user','user-circle','user-plus','user-times','users','whatsapp','windows','yahoo','align-left','bold','code','cog','dollar-sign','ellipsis-h','ellipsis-h-alt','ellipsis-v-alt','eraser','euro-sign','exclamation-triangle','file-alt','flag','flag-checkered','font','fw','hryvnia','image','indent','info-circle','italic','lg','link','lira-sign','list','list-ol','list-ul','lock','outdent','pound-sign','question-circle','quote-right','redo','ruble-sign','rupee-sign','save','shekel-sign','smile','strikethrough','table','tenge','terminal','text-height','tint','underline','undo','video','video-plus','won-sign','yen-sign','balance-scale','thermometer-half','minus-octagon','cogs','home','sliders-h','puzzle-piece','newspaper','bullhorn','wrench','bug','info','tachometer','asterisk','comment-alt','envelope-open','server','octagon','columns','sync','plus-circle','map','random','fire-extinguisher','medkit','thermometer','language','object-group','paper-plane','life-ring','map-signs']
desiredGlyphUnicode = [0x00A0,0x00B7,0x00a0,0xe01a,0xe01d,0xe033,0xe070,0xe094,0xe095,0xe0f2,0xe1ff,0xe20c,0xe20d,0xe311,0xe312,0xe80d,0xe901,0xe902,0xe903,0xe904,0xf101,0xf102,0xf103,0xf104,0xf105,0xf106,0xf107,0xf108,0xf109,0xf10a,0xf10b,0xf10c,0xf10d,0xf10e,0xf10f,0xf110,0xf111,0xf112,0xf113,0xf114,0xf115,0xf116,0xf117,0xf118,0xf119,0xf11a,0xf11b,0xf11c,0xf11d,0xf11e]
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()

I think that's everything. Latest font files attached.

@arn, do you think you could work your sed magic and create some kind of intersection between the glyph names above and their corresponding CSS declarations in core_fa.less? It's not totally necessary, but it would be cool to trim down that last ~40KB of CSS...
 

Attachments

Upvote 0 Downvote
DeltaHF said:
Nice! That definitely picked up some extra icons we had missed, but oddly, it was missing the icons that only appeared in the Admin CP.
Click to expand...

I think I know where those were missed. I scanned templates.xml but there's other files in that directory. I updated the script and the outputs.

@arn, do you think you could work your sed magic and create some kind of intersection between the glyph names above and their corresponding CSS declarations in core_fa.less? It's not totally necessary, but it would be cool to trim down that last ~40KB of CSS...
Click to expand...

I'll take a look later.
 
Upvote 0 Downvote
I spent way too much time on this :)

Try replacing these two sections in core_fa.less with these. To be honest, I'm not entirely sure the .fad classes are used. Duotone font. I haven't looked into how that is used.

Code: 
.fad.@{fa-css-prefix}-align-left:after { content: "\10f036"; }
.fad.@{fa-css-prefix}-angle-double-down:after { content: "\10f103"; }
.fad.@{fa-css-prefix}-angle-double-right:after { content: "\10f101"; }
.fad.@{fa-css-prefix}-angle-double-up:after { content: "\10f102"; }
.fad.@{fa-css-prefix}-angle-down:after { content: "\10f107"; }
.fad.@{fa-css-prefix}-angle-down:after { content: "\10f107"; }
.fad.@{fa-css-prefix}-angle-left:after { content: "\10f104"; }
.fad.@{fa-css-prefix}-angle-left:after { content: "\10f104"; }
.fad.@{fa-css-prefix}-angle-right:after { content: "\10f105"; }
.fad.@{fa-css-prefix}-angle-right:after { content: "\10f105"; }
.fad.@{fa-css-prefix}-angle-up:after { content: "\10f106"; }
.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-up:after { content: "\10f062"; }
.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-slash:after { content: "\10f1f6"; }
.fad.@{fa-css-prefix}-bell:after { content: "\10f0f3"; }
.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-circle:after { content: "\10f058"; }
.fad.@{fa-css-prefix}-check-square:after { content: "\10f14a"; }
.fad.@{fa-css-prefix}-check:after { content: "\10f00c"; }
.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}-circle:after { content: "\10f111"; }
.fad.@{fa-css-prefix}-clock:after { content: "\10f017"; }
.fad.@{fa-css-prefix}-code:after { content: "\10f121"; }
.fad.@{fa-css-prefix}-code:after { content: "\10f121"; }
.fad.@{fa-css-prefix}-cog:after { content: "\10f013"; }
.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}-desktop:after { content: "\10f108"; }
.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-alt:after { content: "\10f39b"; }
.fad.@{fa-css-prefix}-ellipsis-h:after { content: "\10f141"; }
.fad.@{fa-css-prefix}-ellipsis-v-alt:after { content: "\10f39c"; }
.fad.@{fa-css-prefix}-envelope-open:after { content: "\10f2b6"; }
.fad.@{fa-css-prefix}-envelope:after { content: "\10f0e0"; }
.fad.@{fa-css-prefix}-eraser:after { content: "\10f12d"; }
.fad.@{fa-css-prefix}-euro-sign:after { content: "\10f153"; }
.fad.@{fa-css-prefix}-exclamation-circle:after { content: "\10f06a"; }
.fad.@{fa-css-prefix}-exclamation-triangle:after { content: "\10f071"; }
.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-slash:after { content: "\10f070"; }
.fad.@{fa-css-prefix}-eye:after { content: "\10f06e"; }
.fad.@{fa-css-prefix}-file-alt:after { content: "\10f15c"; }
.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}-file:after { content: "\10f15b"; }
.fad.@{fa-css-prefix}-fire-extinguisher:after { content: "\10f134"; }
.fad.@{fa-css-prefix}-flag-checkered:after { content: "\10f11e"; }
.fad.@{fa-css-prefix}-flag-checkered:after { content: "\10f11e"; }
.fad.@{fa-css-prefix}-flag:after { content: "\10f024"; }
.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}-frown:after { content: "\10f119"; }
.fad.@{fa-css-prefix}-gamepad:after { content: "\10f11b"; }
.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}-image:after { content: "\10f03e"; }
.fad.@{fa-css-prefix}-indent:after { content: "\10f03c"; }
.fad.@{fa-css-prefix}-info-circle:after { content: "\10f05a"; }
.fad.@{fa-css-prefix}-info-circle:after { content: "\10f05a"; }
.fad.@{fa-css-prefix}-info:after { content: "\10f129"; }
.fad.@{fa-css-prefix}-italic:after { content: "\10f033"; }
.fad.@{fa-css-prefix}-key:after { content: "\10f084"; }
.fad.@{fa-css-prefix}-keyboard:after { content: "\10f11c"; }
.fad.@{fa-css-prefix}-language:after { content: "\10f1ab"; }
.fad.@{fa-css-prefix}-laptop:after { content: "\10f109"; }
.fad.@{fa-css-prefix}-life-ring:after { content: "\10f1cd"; }
.fad.@{fa-css-prefix}-link:after { content: "\10f0c1"; }
.fad.@{fa-css-prefix}-link:after { content: "\10f0c1"; }
.fad.@{fa-css-prefix}-lira-sign:after { content: "\10f195"; }
.fad.@{fa-css-prefix}-list-ol:after { content: "\10f0cb"; }
.fad.@{fa-css-prefix}-list-ul:after { content: "\10f0ca"; }
.fad.@{fa-css-prefix}-list:after { content: "\10f03a"; }
.fad.@{fa-css-prefix}-list:after { content: "\10f03a"; }
.fad.@{fa-css-prefix}-lock:after { content: "\10f023"; }
.fad.@{fa-css-prefix}-lock:after { content: "\10f023"; }
.fad.@{fa-css-prefix}-map-signs:after { content: "\10f277"; }
.fad.@{fa-css-prefix}-map:after { content: "\10f279"; }
.fad.@{fa-css-prefix}-medkit:after { content: "\10f0fa"; }
.fad.@{fa-css-prefix}-meh:after { content: "\10f11a"; }
.fad.@{fa-css-prefix}-microphone-slash:after { content: "\10f131"; }
.fad.@{fa-css-prefix}-minus-octagon:after { content: "\10f308"; }
.fad.@{fa-css-prefix}-minus:after { content: "\10f068"; }
.fad.@{fa-css-prefix}-mobile:after { content: "\10f10b"; }
.fad.@{fa-css-prefix}-newspaper:after { content: "\10f1ea"; }
.fad.@{fa-css-prefix}-object-group:after { content: "\10f247"; }
.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-circle:after { content: "\10f055"; }
.fad.@{fa-css-prefix}-plus-square:after { content: "\10f0fe"; }
.fad.@{fa-css-prefix}-plus:after { content: "\10f067"; }
.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}-question-circle:after { content: "\10f059"; }
.fad.@{fa-css-prefix}-quote-left:after { content: "\10f10d"; }
.fad.@{fa-css-prefix}-quote-left:after { content: "\10f10d"; }
.fad.@{fa-css-prefix}-quote-right:after { content: "\10f10e"; }
.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}-save:after { content: "\10f0c7"; }
.fad.@{fa-css-prefix}-search-minus:after { content: "\10f010"; }
.fad.@{fa-css-prefix}-search-plus:after { content: "\10f00e"; }
.fad.@{fa-css-prefix}-search:after { content: "\10f002"; }
.fad.@{fa-css-prefix}-server:after { content: "\10f233"; }
.fad.@{fa-css-prefix}-share-alt:after { content: "\10f1e0"; }
.fad.@{fa-css-prefix}-share:after { content: "\10f064"; }
.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}-smile:after { content: "\10f118"; }
.fad.@{fa-css-prefix}-sort:after { content: "\10f0dc"; }
.fad.@{fa-css-prefix}-spinner:after { content: "\10f110"; }
.fad.@{fa-css-prefix}-spinner:after { content: "\10f110"; }
.fad.@{fa-css-prefix}-square:after { content: "\10f0c8"; }
.fad.@{fa-css-prefix}-star-half:after { content: "\10f089"; }
.fad.@{fa-css-prefix}-star:after { content: "\10f005"; }
.fad.@{fa-css-prefix}-strikethrough:after { content: "\10f0cc"; }
.fad.@{fa-css-prefix}-sync-alt:after { content: "\10f2f1"; }
.fad.@{fa-css-prefix}-sync:after { content: "\10f021"; }
.fad.@{fa-css-prefix}-table:after { content: "\10f0ce"; }
.fad.@{fa-css-prefix}-tablet:after { content: "\10f10a"; }
.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-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-circle:after { content: "\10f057"; }
.fad.@{fa-css-prefix}-times:after { content: "\10f00d"; }
.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-alt:after { content: "\10f2ed"; }
.fad.@{fa-css-prefix}-trash:after { content: "\10f1f8"; }
.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-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}-user:after { content: "\10f007"; }
.fad.@{fa-css-prefix}-users:after { content: "\10f0c0"; }
.fad.@{fa-css-prefix}-video-plus:after { content: "\10f4e1"; }
.fad.@{fa-css-prefix}-video:after { content: "\10f03d"; }
.fad.@{fa-css-prefix}-video:after { content: "\10f03d"; }
.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:
Upvote 0 Downvote
and


Code: 
.@{fa-css-prefix}-align-left:before { content: @fa-var-align-left; }
.@{fa-css-prefix}-angle-double-down:before { content: @fa-var-angle-double-down; }
.@{fa-css-prefix}-angle-double-right:before { content: @fa-var-angle-double-right; }
.@{fa-css-prefix}-angle-double-up:before { content: @fa-var-angle-double-up; }
.@{fa-css-prefix}-angle-down:before { content: @fa-var-angle-down; }
.@{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-left:before { content: @fa-var-angle-left; }
.@{fa-css-prefix}-angle-right:before { content: @fa-var-angle-right; }
.@{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}-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-up:before { content: @fa-var-arrow-up; }
.@{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-slash:before { content: @fa-var-bell-slash; }
.@{fa-css-prefix}-bell:before { content: @fa-var-bell; }
.@{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-circle:before { content: @fa-var-check-circle; }
.@{fa-css-prefix}-check-square:before { content: @fa-var-check-square; }
.@{fa-css-prefix}-check:before { content: @fa-var-check; }
.@{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}-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}-code:before { content: @fa-var-code; }
.@{fa-css-prefix}-cog:before { content: @fa-var-cog; }
.@{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}-desktop:before { content: @fa-var-desktop; }
.@{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-alt:before { content: @fa-var-ellipsis-h-alt; }
.@{fa-css-prefix}-ellipsis-h:before { content: @fa-var-ellipsis-h; }
.@{fa-css-prefix}-ellipsis-v-alt:before { content: @fa-var-ellipsis-v-alt; }
.@{fa-css-prefix}-envelope-open:before { content: @fa-var-envelope-open; }
.@{fa-css-prefix}-envelope:before { content: @fa-var-envelope; }
.@{fa-css-prefix}-eraser:before { content: @fa-var-eraser; }
.@{fa-css-prefix}-euro-sign:before { content: @fa-var-euro-sign; }
.@{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}-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-slash:before { content: @fa-var-eye-slash; }
.@{fa-css-prefix}-eye:before { content: @fa-var-eye; }
.@{fa-css-prefix}-facebook-f:before { content: @fa-var-facebook-f; }
.@{fa-css-prefix}-facebook:before { content: @fa-var-facebook; }
.@{fa-css-prefix}-file-alt:before { content: @fa-var-file-alt; }
.@{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}-file:before { content: @fa-var-file; }
.@{fa-css-prefix}-fire-extinguisher:before { content: @fa-var-fire-extinguisher; }
.@{fa-css-prefix}-flag-checkered:before { content: @fa-var-flag-checkered; }
.@{fa-css-prefix}-flag-checkered:before { content: @fa-var-flag-checkered; }
.@{fa-css-prefix}-flag:before { content: @fa-var-flag; }
.@{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}-frown:before { content: @fa-var-frown; }
.@{fa-css-prefix}-gamepad:before { content: @fa-var-gamepad; }
.@{fa-css-prefix}-github-alt:before { content: @fa-var-github-alt; }
.@{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}-image:before { content: @fa-var-image; }
.@{fa-css-prefix}-indent:before { content: @fa-var-indent; }
.@{fa-css-prefix}-info-circle:before { content: @fa-var-info-circle; }
.@{fa-css-prefix}-info-circle:before { content: @fa-var-info-circle; }
.@{fa-css-prefix}-info:before { content: @fa-var-info; }
.@{fa-css-prefix}-italic:before { content: @fa-var-italic; }
.@{fa-css-prefix}-key:before { content: @fa-var-key; }
.@{fa-css-prefix}-keyboard:before { content: @fa-var-keyboard; }
.@{fa-css-prefix}-language:before { content: @fa-var-language; }
.@{fa-css-prefix}-laptop:before { content: @fa-var-laptop; }
.@{fa-css-prefix}-life-ring:before { content: @fa-var-life-ring; }
.@{fa-css-prefix}-link:before { content: @fa-var-link; }
.@{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-ol:before { content: @fa-var-list-ol; }
.@{fa-css-prefix}-list-ul:before { content: @fa-var-list-ul; }
.@{fa-css-prefix}-list:before { content: @fa-var-list; }
.@{fa-css-prefix}-list:before { content: @fa-var-list; }
.@{fa-css-prefix}-lock:before { content: @fa-var-lock; }
.@{fa-css-prefix}-lock:before { content: @fa-var-lock; }
.@{fa-css-prefix}-map-signs:before { content: @fa-var-map-signs; }
.@{fa-css-prefix}-map:before { content: @fa-var-map; }
.@{fa-css-prefix}-medkit:before { content: @fa-var-medkit; }
.@{fa-css-prefix}-meh:before { content: @fa-var-meh; }
.@{fa-css-prefix}-microphone-slash:before { content: @fa-var-microphone-slash; }
.@{fa-css-prefix}-minus-octagon:before { content: @fa-var-minus-octagon; }
.@{fa-css-prefix}-minus:before { content: @fa-var-minus; }
.@{fa-css-prefix}-mobile:before { content: @fa-var-mobile; }
.@{fa-css-prefix}-newspaper:before { content: @fa-var-newspaper; }
.@{fa-css-prefix}-object-group:before { content: @fa-var-object-group; }
.@{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}-pinterest-square:before { content: @fa-var-pinterest-square; }
.@{fa-css-prefix}-play-circle:before { content: @fa-var-play-circle; }
.@{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}-plus:before { content: @fa-var-plus; }
.@{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}-question-circle:before { content: @fa-var-question-circle; }
.@{fa-css-prefix}-quote-left:before { content: @fa-var-quote-left; }
.@{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}-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}-save:before { content: @fa-var-save; }
.@{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}-search:before { content: @fa-var-search; }
.@{fa-css-prefix}-server:before { content: @fa-var-server; }
.@{fa-css-prefix}-share-alt:before { content: @fa-var-share-alt; }
.@{fa-css-prefix}-share:before { content: @fa-var-share; }
.@{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}-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}-spinner:before { content: @fa-var-spinner; }
.@{fa-css-prefix}-square:before { content: @fa-var-square; }
.@{fa-css-prefix}-star-half:before { content: @fa-var-star-half; }
.@{fa-css-prefix}-star:before { content: @fa-var-star; }
.@{fa-css-prefix}-strikethrough:before { content: @fa-var-strikethrough; }
.@{fa-css-prefix}-sync-alt:before { content: @fa-var-sync-alt; }
.@{fa-css-prefix}-sync:before { content: @fa-var-sync; }
.@{fa-css-prefix}-table:before { content: @fa-var-table; }
.@{fa-css-prefix}-tablet:before { content: @fa-var-tablet; }
.@{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-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-circle:before { content: @fa-var-times-circle; }
.@{fa-css-prefix}-times:before { content: @fa-var-times; }
.@{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-alt:before { content: @fa-var-trash-alt; }
.@{fa-css-prefix}-trash:before { content: @fa-var-trash; }
.@{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-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}-user:before { content: @fa-var-user; }
.@{fa-css-prefix}-users:before { content: @fa-var-users; }
.@{fa-css-prefix}-video-plus:before { content: @fa-var-video-plus; }
.@{fa-css-prefix}-video:before { content: @fa-var-video; }
.@{fa-css-prefix}-video:before { content: @fa-var-video; }
.@{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; }
 
Upvote 0 Downvote
I think you've done it, @arn. :)

My dev board seems to be working just fine with a nearly 350kB savings.

I'm going to process the rest of the fonts and packing this up into a formal resource. Maybe we can get some more people to test it and try it out.
 
Upvote 0 Downvote
DeltaHF said:
I think you've done it, @arn. :)

My dev board seems to be working just fine with a nearly 350kB savings.

I'm going to process the rest of the fonts and packing this up into a formal resource. Maybe we can get some more people to test it and try it out.
Click to expand...

Great that it works. With some doing, could prob do this for a custom theme.

Though there may be some issue with distributing the files as a public resource, since i think the fonts are from the pro product, which I imagine is a pay product. People might have to patch them themselves. Not sure if a patch/diff file could be made.

arn
 
Upvote 0 Downvote
That's a good point about redistribution. I suspect a lot of people will need to add a few custom icons to their sets as well, myself included.

I'll just share the resource as a guide which explains how to make a custom set on your own.
 
Upvote 0 Downvote
Here are the updated raw scripts. Including the ones to generate the applicable css lines. It's raw, and it's a bit Frankenstein. I'm not that skilled at sed/pipe -- but it works.

Note: In order to figure out the CSS Class names, I had to map the unicode back to FA-names. So this outputs only fa class names. That original unicode mod for the python script no longer necessary.

Code: 
Part 1 -Spit out Font-Awesome Names from Xenforo Templates and PHP files.  Must be in the Xenforo full package download directory.

1. Search Templates for "fa-xxxx" classes

cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo 'fa-([a-z0-9\-]+)' | grep -v "fa--" | grep -v -E 'fa-light-300|fa-brands-400|fa-regular-400|fa-solid-900' | sed 's/fa-var-/fa-/g' | sort | uniq | tr '\n' ',' | sed 's/fa-//g' 

2. Search templates for unicode values

cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo '\\([a-fA-F0-9]+){4}'  | sort | uniq | sed -E 's/(.[I])/@fa-var-([a-z0-9\-])+: "\\\1";/g' | grep -Ef /dev/stdin upload/src/addons/XF/_data/templates.xml | sed 's/@fa-var-//' | sed 's/:.[/I]//' | tr '\n' ','

3. Search PHP for "fa-xxxx" classes

find . -name '*.php' -exec cat {} \; | grep -Eo 'fa-([a-z0-9\-]+)' | grep -v 'fa-1f1' | grep -v 'fa-fe0f' | grep -v 'fa--' | sort | uniq | tr '\n' ',' | sed 's/fa-//g' 


Part 2 - Generate the CSS Lines you want to keep, save them to "fa-thin.css"

4. CSS Lines from the output of #1 above, Save to "fa-thin.css"

cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo 'fa-([a-z0-9\-]+)' | grep -v "fa--" | grep -v -E 'fa-light-300|fa-brands-400|fa-regular-400|fa-solid-900' | sed 's/fa-var-/fa-/g' | sort | uniq | sed 's/fa-/}-/g' | sed 's/$/:/g' | grep -f /dev/stdin upload/src/addons/XF/_data/templates.xml | grep "fa-css-prefix}" | grep "content" > fa-thin.css

5. CSS lines from the output of #2 above, Append to "fa-thin.css"

cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo '\\([a-fA-F0-9]+){4}'  | sort | uniq | sed -E 's/(.[I])/@fa-var-([a-z0-9\-])+: "\\\1";/g' | grep -Ef /dev/stdin upload/src/addons/XF/_data/templates.xml | sed 's/@fa-var-/fa-/' | sed 's/:.[/I]/:/' |  sed 's/fa-/}-/g'| grep -f /dev/stdin upload/src/addons/XF/_data/templates.xml | grep "fa-css-prefix}" | grep "content" >> fa-thin.css

6. CSS lines from output of #3 above, Append to "fa-thin.css", and sort them

find . -name '*.php' -exec cat {} \; | grep -Eo 'fa-([a-z0-9\-]+)' | grep -v 'fa-1f1' | grep -v 'fa-fe0f' | grep -v 'fa--' | sort | uniq  | sed 's/fa-/}-/g' | sed 's/$/:/g' | grep -f /dev/stdin upload/src/addons/XF/_data/templates.xml | grep "fa-css-prefix}" | grep "content" >> fa-thin.css ; sort -o fa-thin.css fa-thin.css
 
Upvote 0 Downvote
Well, I'm useless with sed so color me impressed. :)

Playing around with your commands there. Not sure I understand how we're using Part 1, Step 2.

arn said:
Note: In order to figure out the CSS Class names, I had to map the unicode back to FA-names. So this outputs only fa class names. That original unicode mod for the python script no longer necessary.
Click to expand...
Does this apply to Part 1 as well? So for the font generation, we only need to use the glyph names output by Part 1, Steps 2 and 3?
 
Upvote 0 Downvote
Nah still have to use all of them

part 1 generates the font awesome names in 3 batches. Those you have to combine into one array to plug into the Python script. It doesn’t spit out 0xUnicode numbers anymore. Those are all mapped to names now.

part 2- after running all 3 in order, you will get a file called fa-thin.css which is those two sets of css declarations to replace manually in the less template
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Alternadiv
PSA: Disable the Font Awesome icons you aren't using if you're concerned about SEO/Google PageSpeed stuff
Replies
1
Views
1K
Hotfix
Hotfix
frm
  • Solved
Font Awesome 6 / Subsetter in XF 2.2?
Replies
10
Views
2K
frm
frm
Dadparvar
Upgraded to XF2.1 - Our Experience
Replies
2
Views
1K
Dadparvar
Dadparvar
51463
  • Question Question
Font Awesome Icons Not Working.
Replies
5
Views
5K
Mike
Mike
Betclever
  • Question Question
XF 1.4 Optimize the order of styles and scripts + speed optizimation
Replies
4
Views
1K
melbo
melbo
Top Bottom