eva2000

Registered
https://icomoon.io/app/ allows you to pick only the icons you want to use and thus reduces size of the font icon file compared to FontAwesome. Maybe Pixelexit could come up with a version of FlatAwesome but instead of using FontAwesome, use Icomoon font set with only the icons required ?

Page speed performance and render speed will be improved too.
 

Russ

Pixel Exit Staff
I thought I responded to this, while the idea is nice, honestly, this seems like it'd be quite the pain to handle on a style release level. The editing of the font file is nice but when you think I'd need to cater to every customer who may be running add-ons that add FA icons or they'll want to use a different icon for X it just seems like a nightmare to support.

Something like this seems best off handled via a custom work.
 

eva2000

Registered
indeed seems like a lot of work though for page speed addicts seems worth it

only publicly guest derived fontawesome icons i derived via command below (but would of missed others that may need being logged in to figure out). Would be handy to have a list of all codes used in themes though.
Code:
curl -s https://community.centminmod.com/ | grep -Eoih class\=\"[^\"]*\" | fgrep 'fa-' | sed -e 's|^class="fa ||g' -e 's|\"||g' -e 's| Tooltip||' -e 's|class=||' -e 's|xbOffCanvasExpand fa ||' | tr " " "\n" | sort -u
fa-bars
fa-btc
fa-caret-down
fa-caret-right
fa-cc-mastercard
fa-cc-paypal
fa-cc-visa
fa-chevron-down
fa-chevron-up
fa-commenting
fa-comments
fa-comments-o
fa-creditcards
fa-envelope-o
fa-external-link-square
fa-facebook
fa-file-text-o
fa-folder-o
fa-fw
fa-gavel
fa-github
fa-google-plus
fa-home
fa-life-ring
fa-link
fa-medium
fa-rss
fa-rss-square
fa-search
fa-sign-in
fa-sitemap
fa-twitter
fa-user-plus
fa-user-secret
fa-youtube-play
those icons result in fontawesome woff2 file that is only 14KB in size !
 

Russ

Pixel Exit Staff
Something like this then I'd just remove the Font Awesome call and include the custom font file, it seems easy enough as a template modification. I can help guide you if you want to give it a shot, should still work the same way I guess.
 

eva2000

Registered
Yeah thinking of giving it a try, though I'd still be missing alot of codes referenced in html for stuff that only would show for logged in users or admin/mods ?? Started building my list at https://gist.github.com/centminmod/6b8dcd28870678b6a8753ef87077ba57

Don't suppose you have an easy list of all the 'fa-*' codes used in your themes ?

I can help guide you if you want to give it a shot,
Yeah if you some instructions for XF 1.5.x version of flatawesome+ :)
 

Russ

Pixel Exit Staff
In the XenBase XML I suppose you could use some sort of regular expression in like notepad++ to extract all of the fa-icon codes but I'm not sure how to do that. Otherwise just searching the xenbase xml for all fa fa- icons and make a list from there. Not all are used for example social icons if you don't enable those social platforms.

Then Style Properties -> [XB] Misc Pages, make sure both: Use Font Awesome via CDN and Use Font Awesome via Locally are unchecked.
 

eva2000

Registered
sweet.. might have got them all from the number of icons i estimate resulting woff2 file would be between 16-20kb !

from pixelexit fontawesome+ 1.5.20 xenbase XML file
Code:
cat style-XenBase-Parent-DO-NOT-EDIT.xml | grep -Eoih class\=\"[^\"]*\" | fgrep 'fa-' | sed -e 's|^class="fa ||g' -e 's|\"||g' -e 's| Tooltip||' -e 's|class=||' -e 's|xbOffCanvasExpand fa ||' | grep -v '{xen' | tr " " "\n" | sort -u
fa-android
fa-apple
fa-arrow-up
fa-bar-chart
fa-bars
fa-bell
fa-bolt
fa-calendar
fa-caret-down
fa-chevron-down
fa-chevron-up
fa-cog
fa-commenting
fa-comments
fa-comments-o
fa-dot-circle-o
fa-envelope
fa-envelope-o
fa-exclamation-triangle
fa-eye
fa-facebook
fa-file-text-o
fa-flag
fa-folder-o
fa-fw
fa-gavel
fa-github
fa-globe
fa-google-plus
fa-home
fa-instagram
fa-key
fa-keyboard-o
fa-lg
fa-life-ring
fa-link
fa-linkedin
fa-lock
fa-map-marker
fa-newspaper-o
fa-outdent
fa-paint-brush
fa-pencil
fa-phone
fa-picture-o
fa-pinterest
fa-reddit
fa-rocket
fa-rss
fa-rss-square
fa-search
fa-share
fa-shield
fa-sign-in
fa-sitemap
fa-star
fa-steam
fa-tags
fa-thumbs-o-up
fa-thumbs-up
fa-thumb-tack
fa-times
fa-toggle-right
fa-trash
fa-trophy
fa-tumblr
fa-twitch
fa-twitter
fa-university
fa-user
fa-user-plus
fa-users
fa-user-secret
fa-user-times
fa-vimeo-square
fa-vk
fa-youtube-play
but missed some not referenced by class="" tags in XML file so need to find tune the extraction
 

eva2000

Registered
couldn't find the icon for this one though corresponding name doesn't match for fa-flip-vertical

Code:
cat style-XenBase-Parent-DO-NOT-EDIT.xml | grep 'toggleClass'
        $('.xbOffCanvasContainer').toggleClass("marginLeft");
        $('.xbOffCanvasContainer').toggleClass("marginRight");
        $(this).children('.xbOffCanvasExpand').toggleClass('fa-flip-vertical ');
otherwise

1546989152467.png
 

eva2000

Registered
also difference in fontawesome css

default

1546990408991.png


reduced

1546990469464.png


so for chrome for woff2 supported browser total size reduced from woff2 = 76KB + css = 31 = 107KB to woff2 = 20KB + css = 10 = 30KB ~71.9% reduction in size !
 

eva2000

Registered
deployed it on my forums and seems almost there.. some of the conversation icons are missing though

1546996100618.png



I did edit flatawesome+ style property = Style Properties: [XB] Misc Pages

Use Font Awesome via Locally

from https://community.centminmod.com/styles/xenbase/font-awesome/css/font-awesome.min.css
Code:
styles/xenbase/font-awesome/css/font-awesome.min.css
to https://community.centminmod.com/fontawesome-small/fontawesome.css
Code:
fontawesome-small/fontawesome.css
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.