liammccarty liammccarty - 24 days ago 10
CSS Question

Icons not loading only when stylesheet is included

I'm using Semantic UI to build a website and using Font Awesome icons. I noticed that the icons are not loading correctly and simply showing up as squares. However, when I remove the link to my CSS stylesheet for the page, the icons DO show up correctly. As soon as I put the link back in, they appear as squares again.

I'm finding this rather baffling and problematic. Any idea what could be causing this? I certainly want to be able to have a stylesheet for the page!

Answer Source

I managed to target the problem to a single part of my stylesheet: * { font-family: Avenir, sans-serif !important; } I wrote this line to standardize the website font, but it's that line that's conflicting with the icons. Any idea as to why this is? And any suggestions for setting the font in a way that won't conflict?

!important tells the property to ignore any specificity. This means that your font-family declaration will completely override the Font Awesome font.

Generally, the only things browsers explicitly set font-family on are the html, body, input, select, textarea and button elements. With this in mind, you should be able to completely override any default fonts by simply using the following:

html, body, button, input, select, textarea {
  font-family: Avenir, sans-serif;

If that doesn't work for you, inspect your page to determine where your custom font isn't being included and add those selectors into the above declaration.