Moodle 4.3 > cause issues icons to appear as squares on some buttons (Fontawesome 5.14.x)

[Dinoraptor101]

I have temporarily addressed the issue using the CSS override.

• Hamburger menu when browsing on tablet / mobile becomes square.
• Slides arrows become square
• Site Administrator General Setting nav bar displays squares.

Here's the Override CSS I wrote to address the issues in Moodle 4.3

/* Override for homepage-carousel controls */
.homepage-carousel .controls a.carousel-control.right:before {
    content: ">";
}

.homepage-carousel .controls a.carousel-control.left:before {
    content: "<";
}

/* Override for header navbar toggler */
#header.navbar.fixed-top .navbar-nav .navbar-toggler:before {
    content: none;
}

/* Override removes broken icon on General Settings nav-bar */
@media (min-width: 768px) {
    .moremenu .nav.nav-tabs > .nav-item .nav-link[href="#linkroot"]:before,
    .moremenu .nav.nav-tabs > .nav-item .nav-link[href="#linkusers"]:before,
    .moremenu .nav.nav-tabs > .nav-item .nav-link[href="#linkcourses"]:before,
    .moremenu .nav.nav-tabs > .nav-item .nav-link[href="#linkgrades"]:before,
    .moremenu .nav.nav-tabs > .nav-item .nav-link[href="#linkmodules"]:before,
    .moremenu .nav.nav-tabs > .nav-item .nav-link[href="#linkappearance"]:before,
    .moremenu .nav.nav-tabs > .nav-item .nav-link[href="#linkreports"]:before,
 .moremenu .nav.nav-tabs > .nav-item .nav-link[href="#linkserver"]:before,
    .moremenu .nav.nav-tabs > .nav-item .nav-link[href="#linkdevelopment"]:before {
        content: none;
    }
}

[Dinoraptor101]

update: issue happens with fontawesome 5.x.x looks like a conflict between Academi and Moodle 4.3.

Was able to resolve by adding the following into the HEAD of HTML.

<script src="https://use.fontawesome.com/02c6d54247.js"></script>

Site Admin -> Appearance -> Additional HTML -> Within HEAD

[Areithel]

Thanks for your solution, helped me setting up my theme, and sharing an update to use FontAwesome 6:

I included the following in HEAD of HTML ( Site Admin -> Appearance -> Additional HTML -> Within HEAD) :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

[abinesh-lmsace]

We have already fixed and updated the latest source on the moodle.org https://moodle.org/plugins/theme_academi

[Dinoraptor101]

Can someone confirm and close this?