0

I use the Stylish extension in Chrome and a custom CSS to force one, big font on all web pages for all elements, because fonts on many pages are too artsy for my eyesight.

* {
    font-family: "Arial" !important;
    font-weight: bold !important;
    font-size: 22px !important; 
}

When I do this, on some pages I now see squares replacing some commonly used icons, like this:

enter image description here

Apparently forcing a custom font messes them up. I want to use a CSS negation to exclude such icon elements from my CSS override, so that I can see them properly. Below is a sample HTML chunk that displays such an icon. The "::before" part seems to be the icon.

<a href="javascript:;" class="social-icon comments event-tracking" data-action="social_article_bottom" data-label="comments" data-article="2617165" tabindex="1000">
<span class="fa fa-comments">
::before
</span>
<h1>Comments</h1></a>

However, I can't get the negation syntax right. Replacing the "*" in my custom CSS with the following gives me a CSS error. Anyone know the proper syntax? 

 :not(fa fa-comments)
MrSparkly
  • 627
  • 1
  • 7
  • 17

1 Answers1

1

I think you want to do something like: 

body *:not(.fa-comments) {
 font-family: "Arial" !important;
 font-weight: bold !important;
 font-size: 22px !important;  
}

Take a look at this link to know more about the :not operator:

https://developer.mozilla.org/en/docs/Web/CSS/:not

Ninjabin
  • 97
  • 5
  • 1
    Thanks, it does work. I figured such buttons may have many class names, so perhaps a better way is to force the font on typical elements, instead of using negation: p,h1,h2,h3,h4,h5,td,ul,ol,li,*[class^='nav'] – MrSparkly Mar 14 '17 at 06:20