Problems With Font Awesome
Jens Funk
Hello, again and again the font awesome icons on this website are not rendered in the correct way. For example on single articles everything works fine: https://waldorfschule-maschsee.de/aktuelles/meldungen/765-waldorfschulen-helfen-der-ukraine.html
but not in the blog-modus (in the text and right column): https://waldorfschule-maschsee.de/aktuelles/meldungen.html
In my theme options (shaper educon) advanced tab, there is no possibility to activate font awesome, like in newer templates. Do you have any advice?
Many thanks in advance, Best, Jens
Rashida Rahman
Accepted AnswerHello,
Yes, it will get updates to fit with the new helix versions and the Joomla 4 as well. As you may know our plan about it already. However, here it is:
https://www.joomshaper.com/blog/joomshaper-s-plans-for-joomla-4
Best Regards
Christian GRENIER
Accepted AnswerHi
The same for me!!!
Edit:
Found for me: this link is missing with template:
<link href="/media/system/css/joomla-fontawesome.min.css" rel="stylesheet">Bye
Jens Funk
Accepted AnswerI also put some research on this topic: the page source reveals different orders of css-files: Working: <link href="/templates/shaper_educon/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> ... <link href="/components/com_sppagebuilder/assets/css/font-awesome-5.min.css?f53ba91a9cc92bb2348e4eab5b1ff3a1" rel="stylesheet" type="text/css" /> <link href="/components/com_sppagebuilder/assets/css/font-awesome-v4-shims.css?f53ba91a9cc92bb2348e4eab5b1ff3a1" rel="stylesheet" type="text/css" /> Not working: <link href="/components/com_sppagebuilder/assets/css/font-awesome-5.min.css?f53ba91a9cc92bb2348e4eab5b1ff3a1" rel="stylesheet" type="text/css" /> <link href="/components/com_sppagebuilder/assets/css/font-awesome-v4-shims.css?f53ba91a9cc92bb2348e4eab5b1ff3a1" rel="stylesheet" type="text/css" /> ... <link href="/templates/shaper_educon/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
In the latter the css-file (deprecated ?) of the good old educon overwrites the newer font-awesome-5.css-file, I suppose. Don't know either. How can I change this? Adding the font-weight-declaration, as recommended in the documentation, brings no solution.
Hello Joomshaper, have you any advice?
Christian GRENIER
Accepted AnswerHi
That I do... for Joomla 4
File: /templates/mytemplate/index.php
In <head> section, I added...
<link href="/media/system/css/joomla-fontawesome.min.css" rel="stylesheet">It works for me, but Im' not sure for you...
Rashida Rahman
Accepted AnswerHi Jens Funk,
Sorry for your issue.
You can use the following code in your custom.css file:
.fa{
font-family: 'Font Awesome 5 Free' !important;
font-weight: 600 !important;
}Hope this will solve the issue for now.
However, the Template will get updates soon as we are on the process of updating all of our templates to adapt new versions of Joomla and others.
Best Regards
Jens Funk
Accepted AnswerHello Rashida Rahman, thanks for your response. In this case, I found the reason. On this page with a blog, an article with a youtube-video is published (License to paint): https://waldorfschule-maschsee.de/aktuelles/meldungen.html
The video is embedded with a SP Page Builder-module with the video-addon, via loadposition/loadmodule (makes no difference). If I turn this off, everything works fine.
As described above, embedding a video in this way, causes a change in the order of the css-files in the head (page-source): font-awesome-min.css of the template appears at last.
Best, Jens Funk
Rashida Rahman
Accepted AnswerHi Jens Funk,
Thanks for sharing your experience with us, and glad that you have made it:)
Best Regards