BUG: Changing the font inside top panel is disturbing the font-awesome icons

Question

Hello, I am using Montserrat google font. Ater trying so many things, finally I was able to set the font using following way:

.gjs-pn-buttons > span{ font-family: "Montserrat", sans-serif; }

But when I do this, the font is changed but the font-awesome icons are not working.

Please refer the following screenshot for more details. This is how it looks after I changed the font.

Thanks for your help.

mcottret · Accepted Answer

Hi @jayeshmotwani ! Font Awesome relies on the font-family attribute for its icons, & since your selector also targets these icons in addition to the text, Font Awesome's font-family gets overridden by yours, which breaks its icons. I'd recommend using a different selector that would only target the text you're interested in modifying the font of & not GJS' icons. Cheers !

jayeshmotwani · Answer

@mcottret Thanks for your reply. I fixed this by adding the label text inside a tag and given my custom font to that particular tag only, instead of entire <span> of button. Cheers!

Changing the font inside top panel is disturbing the font-awesome icons

Question

Answers (2)

Related Questions and Answers

typography sector not found

[BUG] - Not able to get content of a link block

[BUG] - Not able to get content of a link block

Set root does not work

Paid Plugins That Match This Issue

Browse Plugin Categories