1. hboinnard
  2. Commercial Templates
  3. Tuesday, 21 January 2025
  4.  Subscribe via email
Ciaran, a chara,

Long time no see...

I am updating the last few J3 website and template, and following recent changes on the social media market, I need to remove Twitter, sometimes Facebook and other networks. And to add Mastodon, Bluesky, and probably more Fediverse very soon.

I need to temporary change the icons, in parallel of updating to joomla 4/5. While I am still on Joomla 3, for the Naomi template, how can I change the FontAwesome library that is loaded, to benefit from the new icons?
- in place of the v4.7.0?
- beside the v4.7.0, to keep the existing icon/CSS code?

Of course, I can use a "core" hack, as I will not update the Joomla 3 side (already the latest version ;-)

Kindest regards,
Hervé
Accepted Answer Pending Moderation
0
Votes
Undo
Actually replying to myself, with a solution to share ;)

Joomla 4 use FontAwesome v5, and Joomla 5 FA v6. So I decided to go directly there!!

I followed the documentation here
https://docs.fontawesome.com/web/setup/host-yourself/webfonts

- Download the Free version 6.7.2 for the web https://fontawesome.com/download
- Inside the J51 template 'templates/<j51_template_name>', create the folder 'fontawesome-6' (this way, update or restoration of the template would not delete the new files, while keeping FA v4 from the template, used by the administrator side, for the template settings)
- From the downloaded FA pack, copy the following files:
sub-folder css
- brands.css
- brands.min.css
- fontawesome.css
- fontawesome.min.css
- regular.css
- regular.min.css
- solid.css
- solid.min.css
- v4-font-face.css
- v4-font-face.min.css
sub-folder webfonts
- fa-brands-400.ttf
- fa-brands-400.woff2
- fa-regular-400.ttf
- fa-regular-400.woff2
- fa-solid-900.ttf
- fa-solid-900.woff2
- fa-v4compatibility.ttf
- fa-v4compatibility.woff2

- finally, modify 'templates/<j51_template_name>/index.php' (hack, that would be overridden by a template restoration)

- replace the part, around line 199, after ' if ($fontawesome_sw) { '
    	$document->addStyleSheet('templates/' . $this->template . '/css/font-awesome.css');

by:
        // add the core fontawesome file v6
$document->addStyleSheet('templates/' . $this->template . '/fontawesome-6/css/fontawesome.css');
// Your Version 4 js file gets replaced with the .css files for the styles you want to use
$document->addStyleSheet('templates/' . $this->template . '/fontawesome-6/css/regular.css');
$document->addStyleSheet('templates/' . $this->template . '/fontawesome-6/css/solid.css');
$document->addStyleSheet('templates/' . $this->template . '/fontawesome-6/css/brands.css');
// support v4 icon references/syntax
$document->addStyleSheet('templates/' . $this->template . '/fontawesome-6/css/v4-font-face.css');


Then you should be able to display the new icons!!

I cannot use the outline version (regular style) for the moment, but this is not a big issue for me now.
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.