Font Awesome 5.0

Permalink
Hi C5,

Great job on 8.4 release!

My question: Font Awesome version offered with c5 is 4.7... I would like to upgrade to version 5.0. I don't mind paying for the licence but am not sure how to go about installing it.
Can anyone guide me?
Any help is most appreciated.

Thanks,
Marc

MarcYBB
 
mnakalay replied on at Permalink Reply
mnakalay
If you mean using Font Awesome 5 for Concrete5's interface it would most likely break things. The question was already asked and the core team answered that.

If you mean using it in your own theme or something like that, it would be just like using any other font system except you'd have to make sure it doesn't interfere with C5's interface
stewblack23 replied on at Permalink Reply
stewblack23
Is there still an issue with using Font Awesome 5 on C5 8.5.2. When I tired to use it on a new site build a few months back it broke all the icons on the login interface.
barrypearce replied on at Permalink Reply
I do this. I am not prepared to run websites on out-of-date dependencies - they MUST be upgradable. C5 is out-of-date A LONG way in its use of Bootstrap and font-awesome.

I use font awesome 5.11.2.

Firstly a caveat. If it breaks the c5 ui to some degree I do not care. I prioritise website user experience over editor experience....that said I have taken a few steps to fix things in the UI - and the number of breaks is quite low.

I have edited my "feature" blocks to provide the full string not just a single icon. This breaks the preview....but it works. so preview...dont care. I am selecting the icon from the font-awesome website which previews pretty well..

Right all that said...how to make it work:

First up pull in the v4-shims provided by FA.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/v4-shims.min.css"
integrity="sha256-L4B/tCDq4GACEVL8PJebMOHv1j+ry0TFsUOdJzjdw5M="
crossorigin="anonymous">

There is one CSS fix I am aware of as well:

/* Fixes for Fontawesome 4 compatibility with 5. */
.ccm-notification span.ccm-notification-closer:after {
content: "\f410";
font-family: "Font Awesome 5 Free";
}

Something like this would go into your theme header.php:

<?php
$cp = new Permissions($c);
if ($cp->canViewToolbar()) {
?>
<!-- Fix Fontawesome 4 (as used by Concrete5) to use Fontawesome 5. -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/v4-shims.min.css"
integrity="sha256-L4B/tCDq4GACEVL8PJebMOHv1j+ry0TFsUOdJzjdw5M="
crossorigin="anonymous">
<style>
/* Fixes for Fontawesome 4 compatibility with 5. */
.ccm-notification span.ccm-notification-closer:after {
content: "\f410";
font-family: "Font Awesome 5 Free";
}
</style>
<?php } ?>
stewblack23 replied on at Permalink Reply
stewblack23
Thanks this is helpful. Going to try this on my new site built right now.