Font Awesome 5 Kickstarter Announced
- Thread starter RobinHood
- Start date
-
- Tags
- font awesome fontawesome
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?
[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]
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
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/
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/
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.
trapped_soul
Well-known member
Sounds good. Already adding some FA5 on some of our things.I will be writing a guide.
(XF 1.5)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
Well-known 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.
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.
No but there likely will be in XF2 at some point in the future...
motowebmaster
Well-known member
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
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.
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
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:
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)
Similar threads
- Question
- Question
