Reduce FontAwesome icon font file size

Reduce FontAwesome icon font file size

Chromaniac

Well-known member
i did miss another one. arrow-left it appears in one of the popups in that toolbar. would keep on adding any more i locate. would also look into that cli post though it seems a bit complicated for someone like me. thanks!
 

nrep

Well-known member
Many thanks for this - it's a huge improvement!

Do the light/solid styles get used at all if we've selected "regular" in the style properties? It seems to load all 3 variants.
 

nrep

Well-known member
the css edits are breaking my theme. has anyone else tried it yet?

I'm getting problems when making the CSS edits too, at least when I use Template Modifications to make the change:

'Errors occurred when rendering CSS:\A * public:core.less: variable @fa-var-arrows-left is undefined in file public:core.less in public:core.less (on or near line 14374)\A 14371 | readers do not read off random characters that represent icons /\A 14372 | \A 14373 | .@{fa-css-prefix}-align-left:before { content: @fa-var-align-left; }\A *14374| .@{fa-css-prefix}-arrows-left:before { content: @fa-var-arrows-left; }\A 14375 | .@{fa-css-prefix}-exchange:before { content: @fa-var-exchange; }\A 14376 | .@{fa-css-prefix}-arrows-alt:before { content: @fa-var-arrows-alt; }\A 14377 | .@{fa-css-prefix}-align-justify:before { content: @fa-var-align-justify; }'
 

nrep

Well-known member
It looks like it may be related to using template modifications to replace the CSS. I'm using the following regex to match the old CSS code:

#.@{fa-css-prefix}-500px:before { content: @fa-var-500px; }(.*).@{fa-css-prefix}-zhihu:before { content: @fa-var-zhihu; }#is

Then I replace that with the new CSS provided in the article.

I can't see any reason why that shouldn't work, but XF gives template errors when I try it for some reason. Is it OK to use template modifications on .less files?
 

Kirby

Well-known member
Do the light/solid styles get used at all if we've selected "regular" in the style properties? It seems to load all 3 variants.
Be default XF will load solid (because some icons are always used from solid) and brands, no matter which flavor is selected.

So if you have regular or light selected it will load this, solid and brands.
 

nrep

Well-known member
It looks like it may be related to using template modifications to replace the CSS. I'm using the following regex to match the old CSS code:

#.@{fa-css-prefix}-500px:before { content: @fa-var-500px; }(.*).@{fa-css-prefix}-zhihu:before { content: @fa-var-zhihu; }#is

Then I replace that with the new CSS provided in the article.

I can't see any reason why that shouldn't work, but XF gives template errors when I try it for some reason. Is it OK to use template modifications on .less files?
Fixed now... I think there's an error in the CSS code replacment:

Instead of .@{fa-css-prefix}-arrows-left:before { content: @fa-var-arrows-left; }, you should use .@{fa-css-prefix}-arrow-left:before { content: @fa-var-arrow-left; }

Also, fa-var-hdd needs to be added to woff2 file and CSS if XFRM is used.
 

Dnyan

Well-known member
For Uix Theme, icon selection (i did by searching names of each '/foo' icon.

Code:
desiredGlyphNames = ['bell','bell-off','apple','arrow-down','arrow-left','arrow-right','arrow-up','arrow-up-bold-circle','file-document-box','attachment','bullhorn','music','cake-variant','bookmark','brush','camera','check-circle','checkbox-blank-outline','checkbox-marked-outline','chevron-down','chevron-left','chevron-right','chevron-up','clock-outline','content-duplicate','close','arrow-collapse','comment-alert','comment-multiple-outline','swap-horizontal','delete','do-not-disturb','download','earth','pencil','email','cloud-upload','arrow-expand','export','facebook','file','file-document','folder','message-text-outline','github-face','google-plus','chart-bar','view-grid','help-circle-outline','history','home','microphone-off','import','email','information','instagram','account-card-details','thumb-up','link-variant','linkedin','format-list-bulleted','map-marker','lock','key','image','menu','menu-down','menu-left','menu-right','menu-up','call-merge','forum','microsoft','minus','shield','cursor-move','message-plus','open-in-new','file-document','credit-card-outline','pinterest','plus','poll','message','format-quote-close','radiobox-blank','radiobox-marked','star-half','reddit','subdirectory-arrow-right','refresh','clipboard-text','reply','alert-octagon','drawing-box','rss','content-save','magnify','account-search','magnify-plus','settings','share-variant','cart','sort','soundcloud','camcorder-box-off','spotify','star','star-outline','star-half','chart-areaspline','steam','pin','tag-multiple','toggle-switch-off','toggle-switch','trophy','tumblr','twitch','twitter','thumb-down','lock-open','upload','account','account-multiple','video','vimeo','alert','alert','eye','web','comment-alert','whatsapp','youtube']
font = fontforge.activeFont()

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

Kindly do add it in your tutorial.

there are total 134 icons used by Uix and they are listed in style properties > icons
 

arn

Well-known member
did you replace your existing font awesome files?

I made the smaller versions as fontfilename-reduced.woff2 and changed the names of the fonts referenced in these templates:

font_awesome_setup
core_fa.less
 

DeltaHF

Well-known member
DeltaHF updated Reduce FontAwesome icon font file size with a new update entry:

Instructions modified to create separate font files, additional template edits added

The instructions have been updated to suggest users create their own separate -reduced versions of the font awesome files, instead of replacing the original files on the server. Although this requires just a bit more work in editing templates, it has the advantage of forcing all users to download the new, smaller files, and will not trigger XenForo's file health warnings. Leaving the original files in place will also make it easier to undo your changes if you wish to start...

Read the rest of this update entry...
 

Anatoliy

Well-known member
You should now have the newly generated font files:
  • fa-brands-400-reduced.woff2
  • fa-light-300-reduced.woff2
  • fa-solid-900-reduced.woff2
I guess you forgot about fa-regular-400reduced.woff2
 
Top