Font Awesome 5 Kickstarter Announced

Andy.N

Well-known member
Yes, it is much better designed.

However, why use version 4 or version 5 when you can use both? :D

[shameless plug]
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.
[/shameless plug]
Did you do a page load comparison between XF 2 loading the default fontawesome and your simplesvg?
Can we download the simplesvg script and host locally?
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?
 

Arty

Well-known member
Did you do a page load comparison between XF 2 loading the default fontawesome and your simplesvg?
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.

See https://simplesvg.com/docs/simplesvg-svg-fonts/

Can we download the simplesvg script and host locally?
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.

There are PHP and Node.js versions of icon hosting script that are very easy to setup and use. On simplesvg.com I'm running Node.js version because its slightly faster (by about 50ms) due to preloading all icons on startup.

See second part of this tutorial: https://simplesvg.com/docs/api-hosting/

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

Replacing default icons in XenForo is not possible, but you can add more icons by including SimpleSVG script.
 

TimFL

Member
Are there any plans to upgrade to FA5 yet? I vastly prefer the FA5 icons over FA4 (e.g. the chat bubbles on the forums). Maybe offer an option to pick one of the 2? AFAIK they seem to be almost backwards compatible from the few checks I did (only difference being the design looks better IMHO).
 

motowebmaster

Active member
I have a FA 5 Pro license and tested 5.0.6 on my xf 1.5x site (using the v4 shim js) and it didn't look that bad; until I got to the Media Gallery and went back to FA 4. The problem is with the icons in the thumbnails, and ratings, they lose their color (or appear as half-images).

My own site template modifications won't be difficult to update, but am not sure what would be the best approach for Media Gallery. I'm using 1.1.16, can't go to 2.x until some addons are available.

Will there be support for FA5 in the 1.1.x series in the future? I can search the templates and edit the code myself, but wonder if I'll be creating problems in the near future by doing so.
 

motowebmaster

Active member
No but there likely will be in XF2 at some point in the future...
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.
 

Freelancer

Well-known member
Entirely switched my XF1 to Fontawesome 5. Works perfect. XFMG and XFRM too. No fallback needed. No conditionals. It’s just CSS and template editing.
 

Sunka

Well-known member
Entirely switched my XF1 to Fontawesome 5. Works perfect. XFMG and XFRM too. No fallback needed. No conditionals. It’s just CSS and template editing.
Could you tell us how to add Fa icon that exist in FA 5 version

I have licence for FA5 but no matter what I have done, FA5 icons don't show up

Could you please tell us what to do and what to add, and where.
Thank you very much
 

Freelancer

Well-known member
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.
 
Last edited:

Sunka

Well-known member
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.
Generally enabled FA5.
I am licenced user of FA5, but every icon which exist only in 5. version are not shown.
I tried to add <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.
For example, how to show this icon on my forum - https://fontawesome.com/icons/tree-alt?style=solid
 

Freelancer

Well-known member
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.

Check this: https://codepen.io/anon/pen/aqQoEB
I think there is something missing to actually activate pro for you.
 

Freelancer

Well-known member
I did some more research and found a hint in a WordPress blog post.

You need to get the FontAwesome PRO package and upload it to your server. Then link the according .js files to have the Pro content from your server. It makes sense to me that the Font Awesome makers do not provide a Pro Link for the public.

@Sunka Try to upload your FA 5 Pro package to your own installation of XF and then check out the JS paths in the FA 5 Pro Folder. Try to link to those, like it is shown in the WordPress article:

'/js/fa-light.min.js (example for "light" font-weights)
 

Arty

Well-known member
Script version won't work at all because XenForo 2 relies on font by creating pseudo elements. Script version works only with HTML elements like <i class="fab fab-500px" />

Therefore you need to link to fonts.
 

ludak

Member
So what is the best way if I have the pro version of font-awesome to include it in the xenforo2.0 forum. I read bunch of posts and forums asking about this, but it does not seem like there is a simple and clear answer.

Anybody?
 
Top