Not Planned Flatawesome like theme using Icomoon Icons

Support Forums

Public support forums for active customers

Documentation

Read up on the basics of our styles in our documentation area

Bug Reports

Report those bugs so we can squash them!

Ticket Support

Need help in private? View or create a support ticket

eva2000

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.
 
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.
 
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 !
 
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.
 
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 ?

Russ said:
I can help guide you if you want to give it a shot,
Click to expand...
Yeah if you some instructions for XF 1.5.x version of flatawesome+ :)
 
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.
 
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
 
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
 
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 !
 
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
 
You must log in or register to reply here.

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.

View our stylesBrowse all our XenForo styles
DocumentationEssential information for our styles
Back