Moodle – Font Awesome does not show in the :before pseudo content

When upgraded Moodle 3.11 to 4.4, the Font Awesome icons in the :before pseudo content disappeared.

Moodle 3.11 – HTML list with Font Awesome icons

Moodle 4.4 – HTML list, Font Awesome icons disappeared

It turned out, that due to a major upgrade of Font Awesome from 4.x to 6.x in Moodle 4.2, some Font Awesome icons are not properly displayed.

Here is the quick fix.
In the CSS where you define the icon in the :before pseudo content you have to add the new Font Awesome font family, like this:

li:before{
    font-family: "Font Awesome 6 Free";
    content: "\f046" !important;
}

And here is the result:

Cheers,