Font Awesome icons are not shown properly

[Marmanen]

I have installed the theme to Moodle 4.2.2. In some cases like Course categories, the font awesome icons are shown as blocks, not proper icons. I have checked that the fonts load without errors. The same problem appears on the live demo on the Course categories -section The up-button is shown correctly because the arrow is created as <span class="fa fa-angle-up"></span>

[richpav]

It has something to do with font-family: being "fontawesome" instead of "Font Awesome 6 Free" in some places in the CSS, but that's not the entire solution. My brain isn't big enough yet to figure it out entirely.

[indiana71]

It has something to do with font-family: being "fontawesome" instead of "Font Awesome 6 Free" in some places in the CSS, but that's not the entire solution. My brain isn't big enough yet to figure it out entirely.

Please, have you some solution? What I must search into theme files to change?

[richpav]

It's beyond my pay grade to figure out how to fix it. I opted to use a different theme.

[indiana71]

Maybe a solution. Witch theme you use now? I'm starting with a new setup of Moodle 4.3+

[Starfish-Fujieda]

This one. Although I haven't had time to kick the tires yet, it looks good at first glance.

https://moodle.org/plugins/theme_moove

[mricim]

The same problem occurs on the main page of the demo. In the mobile version (small screen), the <span class="fa-bars"></span> menu should appear

[mricim]

It appears there might be an import issue with the "Font Awesome 6" library.

If you edit the file 'moodle/theme/academi/scss/carousel.scss', you'll find:

.homepage-carousel {
    .controls {
        a.carousel-control {
            ...
            &.left:before {
                content: '\f104'; // <-- original
            }
            &.right {
                ...
                &:before {
                    content: '\f105'; // <--original
                }
            }
        }
        ...
    }
}

.homepage-carousel {
    .controls {
        a.carousel-control {
            ...
            &.left:before {
                font-family: "Font Awesome 6 Free";
                content: '\003C';  // change to 'code' in https://en.wikipedia.org/wiki/List_of_Unicode_characters
            }
            &.right {
                font-family: "Font Awesome 6 Free";
                content: "\f054";  // change to 'Unicode' in https://fontawesome.com/v6/icons/chevron-right?f=classic&s=solid
            }
        }
    }
}

The version using Unicode (code) works as expected.

.homepage-carousel {
    .controls {
        a.carousel-control {
            ...
            &.left:before {
                font-family: "Font Awesome 6 Free";
                content: '\f104'; // <-- original
            }
            &.right {
                font-family: "Font Awesome 6 Free";
                content: '\f105'; // <-- original
            }
        }
    }
}

[abinesh-lmsace]

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