Trouble with CSS Icons

I am visually impaired and use s simple style to change all fonts to Apples San-francisco Bold, like this...

* {
font-family: -apple-system !important;
font-weight: bold !important
}

It works well except that it seems all CSS Icons are considered text and are changed to a generic icon that looks like a box with 5 horizontal lines.

By CSS icons, i mean what is discussed on this web site..
https://www.w3schools.com/w3css/w3css_icons.asp

Is there any way to get my style to just leave CSS Icons alone?

Comments

  • You can't use a wildcard as a selector to specify a particular font-family globally, without it also applying to icon fonts. You could drastically improve conflicts by refining selectors, but it'd never be perfect. There are just too many variables.

    If you wanna avoid all possible conflicts, you'll probably wanna remap fonts individually. Maybe a bit of a PITA, but there's typically only about a dozen or so "web safe" fonts, which account for 90% of what you'll run into on the web. Maybe another dozen or two to account for the majority of the rest. Besides, even with a visual impairment, you might find it useful to leave some alone.

    You'd remap like this:
    @font-face {
    font-family: 'arial';
    src: local('-apple-system'), local('comic sans ms');
    }
    @font-face {
    font-family: 'sans-serif';
    src: local('-apple-system'), local('comic sans ms');
    }
    @font-face {
    font-family: 'lucida grande';
    src: local('-apple-system'), local('comic sans ms');
    }
    Google "web safe fonts" and repeat for all of them, or just add fonts as you run into ones that you wanna change. I added "comic sans ms" as a fallback to make it obvious, since I don't have the apple font installed to test.
  • thanks. actually in the meantime i seem to have gotten pretty good results by using not() to exclude span, i and b elements. almost all icon fonts seem to be in one of those 3 elements.
Sign In or Register to comment.