Hi,
I have recently updated my website to 9.3.4 (php 8.3) from an 8ish version and I have some trouble with font-awesome library… The whole site, including admin dashboard, is using the font-awesome css from the theme used on public pages… which is quite old and now I have a lot of squares instead of icons.
I checked and the theme “page_theme.php” is using $this->requireAsset(‘css’, ‘font-awesome’); which in my understanding should use the main concrete lib instead of its local one.
I tried puting the new font-awesome lib in theme dir but it is still looking for the old one (css files don’t have the same name)…
I tried emptying my website cache…
I don’t know what else to do ? Why would the dashboard use the font-awesome from the theme ??
Many thanks for your help
Sylvie
Simple thing to try. CSS is incredibly ‘sticky’ in web browsers so try opening your site in a browser that’s never landed on your site before. If you routinely use Chrome but never use Opera or Firefox, try using the latter 2 and see what happens. This will, at least, narrow your search to the server. To really clear the concrete cache, head to application/files/cache and delete everything under /cache leaving an empty ‘cache’ folder. Also, to truly clear the cache on the server, I have had to go to the cPanel of my hosting package and turn off any and all of the ‘website optimization’ or ‘speed features’ (or whatever your host calls them) and manually clear caches from there. For example, SiteGround has a pretty aggressive caching scheme that drove me crazy until I learned to turn it all off. I mostly run sites with all caching off until things are stable and then turn some stuff back on. Caching is the bane of a developer’s existence.
But, it might not be this at all but this would be my first step.
Thanks a lot for this tips.
I tried deleting what’s inside application/files/cache with no luck.
I tried a different browser…
I finally found out that my theme was registering directly and namely the css file (application/package/themename/font-awesome.min.css) in it’s controller and now problem’s solved !
Best
Sylvie
Good to hear you have it solved. Ahh, for the good olde days when themes were simple things. Not so today.
I think I am having the same problem with my upgrade (the theme isn’t version 9x compatible, so I’ve been tweaking it as part of the upgrade.
However, I don’t quite understand what you did to resolve your problem, would you mind sharing some more details?
Try this, I made it work by changing code.
In an older theme you may need to register this in page_theme.php
$this->requireAsset(‘javascript’, ‘font-awesome’);
$this->requireAsset(‘css’, ‘font-awesome’);
in your CSS:
content: “\f077”;
font-family: “Font Awesome 5 Free”;
font-weight: 700;
in HTML check the new icon writing of Font Awesome 5 Free and change font-weight: 700;
Font Awesome 4:
Font Awesome 5 Free:
Hi Carmel,
First off thanks so much for replying so quickly. Couple questions.
- For the CSS (add additional CSS option)- I was trying to add this to the theme as an override - but the CSS editor was remarking that the first line content: “\f700” was a bad line - so not sure if I am looking to the right spot to add that or a typo?
- When I inspect the element with the check marks both in the old site and the upgraded version I’m not seeing the font family applied (verdana and railway respectively)
- This might be a bit different as the HTML code is using the UL/LI tags which are being shown via this CSS: span.list-checksquare
Looking deeper I see this CSS for that object
.master-container ul li span.list-checksquare:before {
position:absolute;
font-family:FontAwesome;
top:3px;
left:0px;
content:“\f14a”
}
Thoughts?
Hi @plschneide
I commented out the call to font-awesome css file in my theme.
My theme is under the packages folder in the app, so in packages/mytheme/controller.php I commented out :
/* $al->register('css', 'font-awesome', 'themes/mytheme/font-awesome/css/font-awesome.min.css', array(
'position' => Asset::ASSET_POSITION_HEADER,
'minify' => false,
'combine' => true
), $this); */
which was calling the old font-awesome lib, you don’t need to change the call because font awesome (newer version) is already loaded by ConcreteCMS.
Hope you manage to fix you problem
Regards
Sylvie
There are various ways to use Font Awesome. Two simple examples.
As a Button using FA-unicode
<style>
button::before {
content: "\f111";
font-family: "Font Awesome 5 Free";
font-weight: 700;
font-size: 20px;
margin-right: 0.5em;
color: green;
}
</style>
<button>Green Dot Button</button>
Or in a link with the i-tag and proper writing for the free FA version class
<p><a href="https://concretecms.org"><i class="fas fa-arrow-right"></i> Concrete</a></p>
You might have to experiment and decide what is good for you.