Fontawesome brand icons

Grocery CRUD Enterprise
1

Hi
I have Fontawesome 6 PRO, is possible integrate it with GC Enterprise?

I need brand icons that are not displayed correctly with FontAwesome 5.An example: fab fa-whatsapp.

$crud->setActionButton('Chat', 'fab fa-whatsapp', function ($row) {
            $ChatURL=site_url().'chat/'.$row->id;
            return $ChatURL;
        },false);

Also tried:

$crud->setActionButton('Chat', 'fa-whatsapp', function ($row) {
            $ChatURL=site_url().'chat/'.$row->id;
            return $ChatURL;
        },false);

Or if anyone has a clue about how to fix it I’ll really appreciate too much.

Thanks

2

Hello @urgido ,

In order to do that you will need to un-load the font awesome icons from loading. You can do that by simply add the following line (also documentation for it):

$crud->unsetCssIcons();

With this you un-load the font-awesome icons and you can add your own implementation of font-awesome. You will need to make sure that you have loaded the CSS version of font-awesome 6.

If you’ve downloaded the Pro files directly, include the CSS file from your local setup. For example:

<link href="/path-to-fontawesome-pro/css/all.min.css" rel="stylesheet">

And this should work. I am not sure about the details of how to download the assets from font-awesome 6 but I guess this article could be a good starting point: Use a Kit | Font Awesome Docs

Regards
Johnny

3

I set $crud->unsetCssIcons(); as your suggestion but is not working as expected.

I am using Metronic Template to build my backend. Fontawesome 5 (build into metronic’s source)brand icons are displayed correctly were I am not using GC but when I had GC this icons are not displayed.

Look at my attachment. (Black brush tape private info and red brush is to show that Fontawesome is displayed outside GC)

gc_fa
gc_fa1303×427 33.2 KB

4

FYI:
const VERSION = "3.0.10"; // GC Version

5

same issue at latest version. I did an upgrade today

6

So this is most probably that the 2 versions are getting confused. I’ve also noticed that the fa-brands (for whatsapp specifically) is missing maybe this will fix the issue. If this is still not working try to add extra CSS in order to make sure that the correct font-awesome icon set is triggered. .For example for your case:

.fa-brands {
     font-family: "Font Awesome 6 Brands" !important;
}
.fa-whatsapp:before {
     content: "\f232" !important;
}

I guess you’ve got the point. For some reason though I believe that by adding just the .fa-brands it will work for you.

Regards
Johnny

7

With fontawesome 5 I got it workedwith the following trick.

.fa-brands {
                font-family: "Font Awesome 5 Brands" !important;
            }
            .fa-whatsapp:before {     
                font-family: "Font Awesome 5 Brands" !important;           
                content: "\f232" !important;
                font-weight: 900!important;
            }

Later, I will test it with fontawesome 6.

Thanks!

1 Like