Recent
Categories
View Replies (21)

Sophia Template and Font Awesome 5

  1. Issue
0
Votes
Undo
  1. JoomlaGirl
    JoomlaGirl
  2. Sherlock Holmes
  3. Commercial Templates
  4. Saturday, 14 March 2020
  5.  Subscribe via email
I am using your Sophia Template along with SP Builder for further customisation of the main content area.

Since SP Page Builder updated to Font Awesome 5 any icons that I enter into the main content area only showing up in the colour grey, this is despite me having customised the colour through SP Page Builder. This only happens when the default template is set to Sophia, when I change it to say Beez or Joomla Shapers Helix Template the icons are the correct colour. It’s very frustrating as my default template needs to be Sophia.

I suspect that Sophia hasn’t been updated to Font Awesome 5? If that is what is causing the issue what is the way forward Please?

Thank you
Kirsty
Responses (21)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Kirsty

To amend try the following...

1. Disable Font Awesome in the General -> Typography tab of your template settings.

2. Add the following to the Custom Code -> Head Custom Code field...

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
JoomlaGirl
JoomlaGirl
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

Thank you for your reply and information.

I have done as you instructed and the result is that every icon on my website is now a square with no content. This has occurred on all pages, in modules, the main content area, footer, and header, etc. I use quite a few icons throughout my site and now they are all missing?

I am hoping you can assist again?

Thank you
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Font Awesome icon classes are not backward compatible between v4 and v5. May I ask are all icons missing or just the Font Awesome 4 icons?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
JoomlaGirl
JoomlaGirl
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

It seems to be both Font Awesome 4 and 5 icons that are now showing as squares.

Thank you
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

And if you remove the code from the Custom Code field does any icons display? Does your extension load Font Awesome 5? If yes then you would need to edit each extension that loads Font Awesome 4.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
JoomlaGirl
JoomlaGirl
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

Yes, if I remove the code you gave me then I am back where I started with the sections calling in the Sophia template giving me the issues and the sections using SP Page Builder which is updated to Font Awesome 5 working. Will, there be an update to your template soon to be compatible with Font Awesome 5? I have built my site based on it but now I am unable to continue to use it due to this conflict.

Kirsty
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Kirsty

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

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
JoomlaGirl
JoomlaGirl
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Thank you I have sent you an email with the details.
  1. more than a month ago
  2. Commercial Templates
  3. # 8
JoomlaGirl
JoomlaGirl
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran
The issues are still unresolved, as per the email I sent yesterday. I would appreciate some assistance.
Thank you
  1. more than a month ago
  2. Commercial Templates
  3. # 9
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Kirsty

All should be ok now. It appears some of the template icon CSS was effecting the FA5 library. To amend we have added the following to the Custom CSS field of your template settings..

[class^="fa-"]::before, [class*=" fa-"]::before {

    font-family: inherit;

    font-weight: inherit;

}


CIaran
  1. more than a month ago
  2. Commercial Templates
  3. # 10
JoomlaGirl
JoomlaGirl
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

Unfortunately, the original issues still exist when I use Sophia as the default template. Icons are either missing or only showing in grey. When I switch to another template such as Joomla Shapers Helix Template the icons show as the correct color. I will include some screenshots of the issues.

Regards
Kirsty
  1. more than a month ago
  2. Commercial Templates
  3. # 11
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Kirsty

I have created an override for your J51 InlineIcons module to use the FA5 classes. Is there any other J51 module that is not displaying your icons?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 12
JoomlaGirl
JoomlaGirl
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

There are still issues with icons when using the Sophia template and JS Pagebuilder which uses Font Awesome 5. Will there be an update to Font Awesome 5 for the Sophia template soon?

I will not be able to use the template without an update as it's causing issues when combined with JS Pagebuilder. The issues only arose once JS updated everything to Font Awesome 5. I will likely have to use an inferior template that has been updated to Font Awesome 5 as this does not seem to create any conflicts.

Regards
Kirsty
  1. more than a month ago
  2. Commercial Templates
  3. # 13
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Kirsty

Could you give an example of the issue you are having? Just to confirm that this is a template related issue, could you try enabling one of the default Joomla templates (Protostar) and see if the issue still exists.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 14
JoomlaGirl
JoomlaGirl
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I have tested the issues with the Prostar Template and they do not exist. It appears to only be an issue with the Sophia Template which my website is built on. I will include the photos showing the comparison between the two templates.

Kirsty

Prostar versus Sophia Templates.jpg
  1. more than a month ago
  2. Commercial Templates
  3. # 15
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Kirsty

When including an image please ensure there is no space in the filename. Alternatively, images can be emailed to info@joomla51.com.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 16
JoomlaGirl
JoomlaGirl
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Thank you, I have sent the image via email to you.

Kirsty
  1. more than a month ago
  2. Commercial Templates
  3. # 17
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

If you wish your icons to use the color set by your page builder extension rather the template, try adding the following to the Custom CSS field of your template settings..

[class^="fa-"]::before,

[class*=" fa-"]::before {

    color: inherit;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 18
JoomlaGirl
JoomlaGirl
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I am confused as to why I need to insert the CSS given there is no issue with Prostar or any other template other than Sophia? Isn't the issue with the Sophia Template? Wouldn't updating the template to Font Awesome 5 which the ones that are working already have solved the issue?

By inserting the CSS it seems that I would have to use the same colour for the icons throughout the template which is very restrictive. With other templates other than Sopjia they pick up on the settings from the page builder where I have used and will likely use multiple icon colours throughout the website of the same icons.

Kirsty
  1. more than a month ago
  2. Commercial Templates
  3. # 19
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Kirsty

The template defines a default color for FA icons. This template definition is overruling the color defined by your page builder extension. Adding the suggested CSS ensures your icons inherit the color from your page builder rather than the template.

As you pointed out, the template setting the icon color does restrict 3rd party extensions. I have therefore updated this template, removing the icon color definition.

Protostar does not load Font Awesome and therefore does not include any related CSS that may conflict with 3rd party extensions.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 20
  • Page :
  • 1
  • 2


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