Totara Learn Open Discussions

Using Font Awesome on Totara Basis theme

这个讨论区有规定周期内发帖数的限制，它被设置为 1天内最多发 3 个帖子。

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

永久链接 | 回复

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

永久链接 | 显示父帖子 | 回复

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;}

永久链接 | 显示父帖子 | 回复

Fantastic Adrian, glad I could help.

永久链接 | 显示父帖子 | 回复