Implemented Include Font Awesome By Default

Chris D

XenForo developer
Staff member
Just to be clear, I know there is already a suggestion that suggests replacing all XF sprites and icons with Font Awesome here: http://xenforo.com/community/threads/replace-all-images-with-font-awesome.63806/

But this suggestion is much more simple and potentially more do-able sooner rather than later.

My suggestion is:
  • An option in the Admin CP that allows us to select:
    • Font Awesome Disabled
    • Font Awesome CDN
    • Font Awesome Local
  • A template that is included in PAGE_CONTAINER by default
  • That template either loads nothing, Font Awesome from the Bootstrap CDN or a locally hosted Font Awesome CSS + fonts.
What this does is it will give style designers, and add-on developers and admins the ability to freely make use of Font Awesome without it having to be included manually.

There are cases where some sites are making several requests for the Font Awesome CSS. Some people are adding it themselves, some people have it with their custom styles and some people have it included in one or more add-ons.
 
Upvote 99
This suggestion has been implemented. Votes are no longer accepted.
I just opened a new demo to take a look at the media gallery addon and I saw this option, I did't see it before.
bb861590fc8ada406e9c4cf5f5613df4.png
 
If there ends up being a CDN option, make sure there are instructions on setting up CORS headers on the server side, or that XenForo includes the appropriate CORS headers in the response. Otherwise the icons don't show up in FireFox due to cross-origin security rules that apply to WOFF files. The forum's server has to say that it is okay to load certain resources from the CDN.
 
If there ends up being a CDN option, make sure there are instructions on setting up CORS headers on the server side, or that XenForo includes the appropriate CORS headers in the response. Otherwise the icons don't show up in FireFox due to cross-origin security rules that apply to WOFF files. The forum's server has to say that it is okay to load certain resources from the CDN.

This so much.

I also noticed it only happens in Firefox though. Its slowly becoming my least favorite browser with all the work I have to put into it to make things work.
I just opened a new demo to take a look at the media gallery addon and I saw this option, I did't see it before.
bb861590fc8ada406e9c4cf5f5613df4.png

@Chris D, since its in the Demo, could you say if it uses the CDN or local files?
 
They have a service for that called FontIcons IIRC. It's not free. But you can choose the icons you want in your pack and across multiple packs (not just FontAwesome).
 
Hi Chris! Yes, I tested fonticons about 6 months ago since the begining of the project,
R 2015-05-13 at 20.55.39.webp
I was one of the first users in receive invitation to try the service. now I'm looking that to download the kit I have to upgrade my account ($40/year). I'm interested.
It's easy to load the kit here in XenForo here once downloaded?
 
No idea. I imagine it's as easy as including any font be that hosted on a CDN or locally. I'm sure instructions will be included from their side.
 
Nowadays not only an official XF addon uses font awesome, but a very large numbers of addons and styles. My install has 7 calls to load font awesome.
 
Optimize your FontAwesome experience by
  • checking via template search which versions are loaded and update all url calls to the latest version (modify the template). For all add-ons.
  • checking template modifications if they use to call the FontAwesome url and deactivate the specific mods entirely (only if nothing else is modified beside the FontAwesome call)
  • downloading the latest FontAwesome package folder and upload it to your server. Then replace any call of all your add-ons with the link to your local folder
This helped me to reduce the load of it to only once and makes you independent from the FontAwesome server in case it is not accessible temporarily (which I encountered more than once although only short termed) which leaves your page without icons otherwise.
 
Iirc there was a Google hosted font awesome thing for a bit. I had issues with that because of Chinese members blocked accessing Google.
 
That's not really relevant here. The location in the source where a preload goes would be effectively identical to where we actually load the CSS.
 
Top Bottom