Totara Learn Open Discussions

Using Font Awesome on Totara Basis theme

Welcome to this forum!

Hi,

We'd like to be able to use Font Awesome Pro on our Totara site but we are running into conflict errors because of the Font Awesome in the Basis theme.

Has anyone successfully averted this problem?

Adrian

Permalink | Reply

Hi Adrian,

I know of at least one other subscriber who has purchased and used Font Awesome Pro with Totara.

We don't know the exact details of how they achieved it, but I am aware of one gotcha in there.
The icons need to be loaded using the markup provided by Font Awesome, how you do this will depend upon your theme, but
This will define the font.

The CSS within our theme's force the FontAwesome definition we have using !important. This is required due to the legacy CSS within those same themes.
In order for your font definition it to take effect you will need to also add a snippet of CSS to force the use of that font against our classes.
The following is the kind of override that will be required:

[class^="fa-"],
[class*=" fa-"] {
    // use !important to prevent issues with browser extensions that change fonts
    /* stylelint-disable */
    font-family: '' !important;
    /* stylelint-enable */
}

I hope that helps you.

Kind regards
Sam Hemelryk

Permalink | Show parent | Reply

Thanks Sam,

Your code snippet told me where to look. I haven't completely tested it but it appears to be working so far. I had to override my override for the system icons by using the following where DOMAINNAME is the class from the page's body tag:

.DOMAINNAME .ft-fw {
    font-family: 'FontAwesome'!important;
}
[class^="fa-"], [class*=" fa-"] {
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Duotone', 'Font Awesome 5 Brands', 'FontAwesome' !important;}

Permalink | Show parent | Reply

Fantastic Adrian, glad I could help.

Permalink | Show parent | Reply