Close

Add Font Awesome to the Emporium Responsive Theme

Jcomp
one month ago
#15943 Quote
Avatar
  • 9
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?
Valentin
one month ago
#15944 Quote
Avatar
  • Moderator
  • 139
Jcomp wrote:
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.
Best Regards,

Valentin Kirov
Nop-Templates.com
Jcomp
one month ago
#15949 Quote
Avatar
  • 9
Hi Valentin,

Thanks, it did the trick.