Elxis CMS Forum

Support => Elxis 4.x/5.x DEV => Topic started by: RogerK on October 24, 2019, 18:43:38

Title: FontAwesome to template Ares after upgrading to 5.0
Post by: RogerK on October 24, 2019, 18:43:38
With Elxis version 4.5 I  load to the template using the font FontAwesome with $eDoc->addFontAwesome() on function createTPL .
After upgrading to Elxis 5.0 fonts does not display the icons.
What do I need to add to the template to work properly?
what is the path to a new library?
Also, the template Ares needs an upgrade to be compatible with Elxis 5.0
Title: Re: FontAwesome to template Ares after upgrading to 5.0
Post by: datahell on October 24, 2019, 19:34:55
Elxis 5.x uses fontawesome 5. However it is backwards compatible to fontawesome 4. Problems may exist when you display the fonts with CSS using pdeudo-elements.

Example 1
Fontawesome 4:
<i class="fa fa-camera"></i>
Fontawesome 5:
<i class="fas fa-camera"></i>

You will not have problem with the above code for fontawesome 4 in Elxis 5.x because there is backwards compatibility.

Example 2
Fontawesome 4:
.something::before { font-family: "FontAwesome"; font-weight: 900; content: "\f030"; }
Fontawesome 5:
.something::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f030"; }

You will have problem with the above code for fontawesome 4 in Elxis 5.x because there is no "Fontawesome" font anymore. The correct font-family name is "Font Awesome 5 Free". So, in this case you must edit your css file and change "FontAwesome" to "Font Awesome 5 Free". Also, in some rare cases, the unicode code (here f030) has been changed.
Title: SOLVED: FontAwesome to template Ares after upgrading to 5.0
Post by: RogerK on October 24, 2019, 19:52:05
Thank you very much datahell.
I'll try your tips immediately. I already saw in your new template five exactly what you are telling me and I will change what I need.
Title: Re: FontAwesome to template Ares after upgrading to 5.0
Post by: RogerK on October 24, 2019, 21:08:55
I found that:
The new version of Font Awesome also requires font-weight: 900; when you use solid icons in custom css classes.
The unicode entrypoint \f005 works without font-weight because it represents a regular icon with a font-weight value of 400.
Title: Re: FontAwesome to template Ares after upgrading to 5.0
Post by: datahell on October 24, 2019, 21:45:39
I love when users do some research by themselves. Good job Roger!
Title: Re: FontAwesome to template Ares after upgrading to 5.0
Post by: webgift on October 24, 2019, 22:39:48
I feel exactly the same! Bravo @RogerK!