Hello

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this further. For our reference please paste a link to this post in your email.

Prior to sending, please upload all files to a folder on your server (eg. ../templates/j51_bianca/fontawesome)

Ciaran

Thank you for your reply.

I have sent the email with temporary access. (same email for two cases on this forum linking the two posts).
All files were uploaded under:.. /templates/j51_Bianca/FontAwesomePro)

Thanks

Hello

I have added the following in between the head tags within your template's index.php (../templates/j51_bianca/index.php) which loads the entire lirbary...

<script defer src="/https://www.afmssc.com/templates/j51_bianca/FontAwesomePro/fontawesome-pro-6.1.2-web/js/all.min.js"></script>

My only concern is that this file is very large and will likely have a performance impact on your site. You may wish to alter this to target one of the icon subsets depending on your requirements.

Ciaran

Dear Ciaran,

Thank you so much for helping out with this topic.
I will consider your advice and have a smaller file including only the icons needed for this website. In this case, should I just replace the files under the main file I created (FontAwesomePro)?

Now I have faced the following issues after implementing the new FontAwesome Pro;

1. The in-line social media icons next to the hornav menu did not load! I had to create new custom icons within the template style (Social Media Icons section) and added the Font Awesome icon class name. It worked, but I was not able to change the icon color. Is there a way to have the social media icons directly loaded from my new icons set without the need of creating custom icons?
   

2. When trying to add FonAwesome icons to mod_j51icons, it does not work! Please see attached image. Basically, I wanted the FontAwesome Pro icons particularly for this module, so can you please help me with that?
   

Please note that the new set of FontAwsopme Pro you helped me to add within the template is working perfectly in other areas (menu items and within texts). I thank you for that.

Just a note, I have tried all these options with no luck

Example:
fa-regular fa-user
far fa-user
fa fa-user
fa-user

With the last option (fa-user) I get the image I sent while with all other options I get a blank green rectangle

Hello

1. Would you have a URL directly to an example of the icon whose color you wish to edit? Sorry to say, as this module does not formally support FA6, the only way to add these icons is using the custom icon option

2.Would you have a URL to an example of your icons module?

Ciaran

Hello Ciaran,

This is unfortunate but no worries I found out in the forum how to change the social media icons color by adding the following code to the custom css field

#socialmedia ul li a {
color: #00007e;
}


As for the second issue, here is the link
https://www.afmssc.com/index.php/products/molecular-diagnostics

Your previous temporary access is still active. Please help me with this one as it's the most important issue. Thanx

Hello

Ensure to add the full set of FA6 classes with each icon. So instead of...

fa-dna

Use...

fa-solid fa-dna

Ref: https://fontawesome.com/icons/dna?s=solid&f=classic

Ciaran

Dear Ciaran,

As I mentioned before, I have tried all the options including "fa-solid fa-dna" but that did not work!
By the way, I had the same issue with the mod_j51icons module even before having the FA6.

Hello

I created a new module titled Test Icons Module and added an icon using the class fa-solid fa-dna and it appears to display the icon without any issues. Until you get to test, I have disabled this module.

Ciaran

Hello again,

Thank you for setting this test module, it helped me see where the main issue is.
After multiple trials, I found out that the Icon Module for some reason is deactivating the Icon Settings tab parameters once I select FA as the Icon Font Set.

1. First, it does not respond to the Icon Size nor Icon Color from the Icon Settings tab. It's by default selecting the primary color of my template and set the icon size too small no matter how I try to change the settings.
   

1. It does not respond to the Icon style (Square & Circle). If I keep it as "None", it shows the icon but as I said without changing the color nor the size. When I chose one of the other options (square or circle), it sets a long rectangle instead with the same primary color and that's why the icons were not visible when I raised this issue at first.
   

1. Also here when choosing the icon style as Square or Circle, it does not respond to any of its parameters (Icon Background Color, Border Size & Border Color)
   

I tried instead setting the icon parameters using Override Default Style under the Icons tab; that worked fine for changing the icon color and background and for the size I had to use fa-3x or fa4x in the icon class to enlarge. But here I cannot change the icon padding from the text nor change the style (square or circle) also I cannot change the border parameters. I was only able to add icon class fa-border but without a style. So I still have an issue with having the Icon style.

To be honest I don't think this is the proper way to solve the issue but it was a try to see where the main problem is.

For this purpose, I have created a Test Page for you to check https://www.afmssc.com/index.php/products/test-page and also screenshots here to see.
I added three modules at Top-1a position (Test Icons Module, Test Icons Module (2), Test Icons Module (3). P.S. I chose strong colors for the purpose of showing the difference.

• Test Icons Module: Different Icon parameters with Icon Style "None". The first icon changed the icon settings without enabling the override. For the other two icons, I used the override.
  

• Test Icon Module (2): same settings as the above one but with changing Icon Style to "Circle"
  

• Test Icon Module (3): same settings as above but with choosing Pixeden Stroke 7 as the Icon Font Set instead of FA and changing Icon Style to "Circle". Where you can see that the module is responding to all settings here.
  

I hope this explains the issue with this module combined with the FA.
P.S. Your temporary access is still active.

Mai

Hi Mai

This is tricky due to the very different way Font Awesome 6 icons are implemented. Font Awesome 5 icons are loaded from a font. However, with Font Awesome 6, the DOM is searched for elements with FA classes, that element is removed and an SVG icon is injected in its place to match the icon class.

To support Font Awesome 6 while retaining all the current features in the Icons module, we will need to create a new update to the Icons module.

Ciaran

That makes sense, thank you for the clarification. Will you be kindly able to do the update?

Hello

Joomla 4 is currently loading Font Awesome 5 so we had intended to wait until Joomla had updated to 6 before also migrating the Icons module to the newer version. If this does not happen with the next Joomla release then we will look into the possibility of updating to FA6 separate to Joomla. Loading 2 versions of Font Awesome is not ideal so we had hoped to try and avoid this.

CIaran

Dear Ciaran,

Thank you for making this very clear. I would appreciate updating me if Joomla's next release is compatible with FA6 and once you decide to migrate the Icons module to a newer version.

Thank you so much for your continuous support!

Hello

I have added the following in between the head tags within your template's index.php (../templates/j51_bianca/index.php) which loads the entire lirbary...

<script defer src="/https://www.afmssc.com/templates/j51_bianca/FontAwesomePro/fontawesome-pro-6.1.2-web/js/all.min.js"></script>

My only concern is that this file is very large and will likely have a performance impact on your site. You may wish to alter this to target one of the icon subsets depending on your requirements.

Ciaran

Dear Ciaran,

My FontAwesomePro classes are no longer loading on the site!
I have NOT changed anything or made any modifications! All the FA-Pro package with all classes were working fine until two days ago, everything missed up and I'm only able to load FA 4 class (i.e. as an example "fa fa-user" instead of "fa-regular fa-user" or "fa-duotone fa-user", even FA 5 class is not working "far fa-user".

What could have happened here? I presume you have deleted the free package and kept the Pro one.
Look at the Icon Module here at top-2a and the base-2c module at the bottom right of the page, also the "About" menu items:
https://www.afmssc.com/index.php/products/core-lab All the shown modules were working fine with no issues before but now all are not loading the FA-Pro.

Here (t top-2a module) I tried to change the icon class to FA4 style (i.e. fa fa-icon):
https://www.afmssc.com/index.php/products/molecular-diagnostics, in this case they loaded.

Any idea what could have made this change in all the modules using FA classes?

Hello

Have you since updated your template? Looking at the site source, there no longer appears to be any call for the Font Awesome 6 library. Updating your template would revert your template's index.php to the original.

Ciaran

if yes you can try adding the script to the Head Custom Code field of your templates parameters (Extensions -> Template Manager -> YourTemplate -> Custom Code -> Head Custom Code)...

<script defer src="/https://www.afmssc.com/templates/j51_bianca/FontAwesomePro/fontawesome-pro-6.1.2-web/js/all.min.js"></script>

Ciaran

Hello

Have you since updated your template? Looking at the site source, there no longer appears to be any call for the Font Awesome 6 library. Updating your template would revert your template's index.php to the original.

Ciaran

Dear Ciaran,

No, I have not made any template update myself. I guess you have made an update while trying to fix the slideshow animation issue I had in a different thread (here: https://www.joomla51.com/forum/j51-bianca-animate-on-scroll-down-j51-layerslideshow-issues#reply-43688).
This FA issue appeared right after you fixed the layer slideshow issue. I have also noticed that the logo is missing from the offline page again due to the same reason I guess! Would you please check that as well?

I have tried adding the script as mentioned but that did not work. I have added that to one of the template styles named (J51_Bianca - AFMS-Core Lab)
Example page: https://www.afmssc.com/index.php/products/core-lab

UPDATE

I have changed the script code by removing the website URL from the path also use all.js instead of all.min.js file and that worked
<script defer src="/templates/j51_bianca/FontAwesomePro/fontawesome-pro-6.1.2-web/js/all.js"></script>

After reviewing FA docs, I decided to avoid using "all.js" or "all.css" and switch to individual styles to improve performance as they recommended (Ref: https://fontawesome.com/docs/web/setup/upgrade/)
Also since the script code renders SVG + JS files, I decided to go with Web Fonts + CSS files instead as Joomla 4 and J51 modules are not 100% ready for FA-6 yet.

For the sake of other users who would like to use FA-6 in their projects and do not want to alter their current modules and template css settings, I added the following within my template's index.php (../templates/j51_bianca/index.php): **I could have added it to the Head Custom Code field of my templates parameters but I have around 25 template styles within my project and I wanted an easier option

<link href="/templates/j51_bianca/FontAwesomePro/fontawesome-pro-6.1.2-web/css/fontawesome.css" rel="stylesheet">
<link href="/templates/j51_bianca/FontAwesomePro/fontawesome-pro-6.1.2-web/css/regular.css" rel="stylesheet">
<link href="/templates/j51_bianca/FontAwesomePro/fontawesome-pro-6.1.2-web/css/light.css" rel="stylesheet">
<link href="/templates/j51_bianca/FontAwesomePro/fontawesome-pro-6.1.2-web/css/brands.css" rel="stylesheet">
<link href="/templates/j51_bianca/FontAwesomePro/fontawesome-pro-6.1.2-web/css/duotone.css" rel="stylesheet">

* I have only added the Styles files that I want for my project here. Users can add any style they want from their icons Pro kit.

This has made the social media icons on the hornv menu and J51_Icons module work perfectly fine and as they should without any css code or modification. Only one drawback is the duotone icon style would not render perfectly or line as it should be when used within text or within menu item class but they work beautifully with the J51_Icons module and that's all what I need. (see attachments)
**If duotone style is a must on all modules, then inserting the script code will load the SVG files and render the duotone style as an image but then this will alter any modules that are with the previous FA version settings. So you can add the following between the HEAD tags in your index.php
<script defer src="/your_path_to_version_6_files/js/solid.js"></script>
<script defer src="/your_path_to_version_6_files/js/brands.js"></script>
So you have to compromise and chose which is more important for you.


I only need one favor from you Ciaran here as the last update you made removed the logo from my offline page, please direct me on how to fix that.

Thanks,
Mai