Add Font Awesome to the Emporium Responsive Theme

I have a difficult time to add Font Awesome (or any other icons font) to the theme.
The problem is related to the fact that theme is using a pseudo selector for all element to change font-family:

*:before, *:after {
    font-family: "emporium-icons";
    box-sizing: border-box;
}

And if I comment out that, Font Awesome start working, but theme icons stop. What would you suggest?

Hello Jcomp,

we have done this because in general most of the pseudo-elements in the Emporium theme are used for icons, therefore it saves a lot of time to set the font-family for all of them at once, instead of repeating it over and over every single time.

In your case, since you are using FontAwesome, you can use some of their specific markup of class-names to write a more specific selector and override the font-family property e.g.

.fa:before, .fas:before, .far:before, .fal:before, .fad:before, .fab:before,
.fa:after, .fas:after, .far:after, .fal:after, .fad:after, .fab:after {
    font-family: "Font Awesome 5 Free";
}

Have in mind, that depending on the type of license you have for FontAwesome, the font-family name can vary. Please refer to this link - FontAwesome

Hope this was helpful and solves your problem.

Hi Valentin,

Thanks, it did the trick.