Did you do a page load comparison between XF 2 loading the default fontawesome and your simplesvg?Yes, it is much better designed.
However, why use version 4 or version 5 when you can use both?
See https://simplesvg.com/ (under construction, but its almost complete and everything is working except for documentation pages)
FontAwesome 4: https://simplesvg.com/icon-sets/fa/
FontAwesome 5 Solid: https://simplesvg.com/icon-sets/fa-solid/
FontAwesome 5 Regular: https://simplesvg.com/icon-sets/fa-regular/
FontAwesome 5 Brands: https://simplesvg.com/icon-sets/fa-brands/
and thousands of other icon sets. You can use them all on same page without loading massive amount of fonts.
Its not possible because that depends on number of icons. However on average page it should be smaller. Script is 16kb + about 0.5kb per icon. Only icons used on page are loaded. Icons are loaded in bulk and cached, so on first page load it would load some stuff (in fraction of second), then icons will be retrieved from browser cache.Did you do a page load comparison between XF 2 loading the default fontawesome and your simplesvg?
Yes. You can host everything yourself without relying on third party websites. API code is available on GitHub, SimpleSVG is configurable so you can easily point it to your API.Can we download the simplesvg script and host locally?
That's tricky. XenForo 2 templates have hardcoded requirements for FontAwesome. Some of it is generated by template engine that can't be modified, stylesheet heavily uses pseudo elements. I've tried replacing it, after several attempts gave up because its way too integrated. XenForo 2 cannot be changed. XF2 code is way too opinionated to be changed, not to any other font, not to SVG. Then even if code is changed, third party add-ons rely on FontAwesome, so templates for add-ons must be changed too.What XF template would you add the script in and remove the XF script? Also, we have to replace every FA icon that XF uses?
Thanks. I went ahead and edited my custom style manually to support FA5. Ended up having to use a conditional to load the v4 Fontawesome script on the media view page in order to support the image rating setup. It's not perfect, but the site is loading a bit faster.No but there likely will be in XF2 at some point in the future...
Could you tell us how to add Fa icon that exist in FA 5 versionEntirely switched my XF1 to Fontawesome 5. Works perfect. XFMG and XFRM too. No fallback needed. No conditionals. It’s just CSS and template editing.
Generally enabled FA5.There are a few tweaks that need to be done to have FA5 run in every situation.
One thing for example is that FA makers recommend you do not run older versions parallel because auf CSS conflicts.
The new version is now not only one “font-family” but multiple “Free”, “Brands”, "Pro" and “font-weight” plays a major role now which icon variants like "Regular", "Solid", "Light" etc. Safari compensates for missing font-weight css while Chrome and Firefox just do not show an icon but the “font” placeholder only. In addition to that they changed older icons to new names so for example the “pencil” (which is often used for “edit” buttons) is now “pencil-alt” (for alternative) and icons that had the “-o” ending do not exist anymore. That means a lot of testing and tinkering.
@Sunka was your question meant on how to generally implement FA5 or are you missing one particular icon? Could you describe a little bit more what you did and what you encountered? I will try to help.
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>in head sectin in PAGE_CONTAINER template, but 5. versions icon not shows on page.
I am pretty sure that this is only a link for the free version. It actually works with FREE FA icons. I tested it with CodePen. It does not work with Pro Icons. I do not have Pro. I do not know what the difference might be with JS. Since you have PRO, you either need a reference link that is pro related, or a link to your server FA5Pro. I would contact FA Customer Support and ask what you need to get access to Pro.<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
'/js/fa-light.min.js(example for "light" font-weights)