post by urgido on Jan 6, 2025

urgido

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

post by johnny on Jan 6, 2025

johnny

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

post by urgido on Jan 7, 2025

urgido

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

post by urgido on Jan 7, 2025

post by urgido on Jan 7, 2025

post by johnny on Jan 11, 2025

johnny

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

post by urgido on Jan 16, 2025

urgido

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!

Jan 2025
1 / 7
Jan 2025
Jan 2025

Want to read more? Browse other topics in Grocery CRUD Enterprise or view latest topics.