Font Awesome CSS overriding my CSS

7

votes

I am working on a page - click here for link. The icons are all supposed to have the font size of .side-icon:

.side-icon{ 
    font-size:28px;
}

BUT a style in font-awesome.css is overriding this, no matter where I include the library in the layout.

At the moment I have included the css in the top of a work around sheet (font-awesome-fix.css) using an @import, but I cannot get the 'font: normal normal normal 14px/1 FontAwesome;' to disappear at all.

Please help!

htmlcssfontsfont-awesome

5

votes

Make your selector more specific :

.side-icon.fa

See here how the priorities of the selectors are calculated.

2

votes

Hey you should target the before element :

.side-icon:before{ 
    font-size:28px;
}

0

votes

maybe try adding an id to the specific .side-icon that you need to change the font on.
CSS:

.side-icon #id_goes_here{
font-size:14px;
}

Hope this helps!

0

votes

The very helpful "!important" usually helps me solve issues like this, or at least determine the root issue:

.side-icon{ 
   font-size:28px !important;
}

0

votes

Try using more specific css to override the other styles. This may include adding classes or ids so you can chain them together to override.

Examples:

.side-icon.foo{styles}
#bar.side-icon{styles}

If that still doesn't work, you may want to use the !important override to add another layer of specificity. I wouldn't reccomend jumping to use it immediately, but that's mostly because i prefer to code more specifically than using !important everywhere.

Example:

.side-icon{style:value!important;}

If neither of these work, there may be other issues messing with your styles.

0

votes

This is because of the CSS specificity rule kicks in:

When selectors have an equal specificity value, the latest rule is the one that counts.

So including your file at the topmost location does not help because the font-awesome.css gets included later and since both .side-icon and .fa are classes on the same element, .fa defined by font-awesome.css got picked up by the browser because .fa was the latest font-size definition.

So, in order to overcome this problem, include your font-awesome-fix.css after font-awesome.css or you could use inline style after the line that includes font-swesome.css

<style>
  .side-icon {
     font-size: 28px;
  }
</style>

or override the .fa font declaration in the same file (if you have control over it) by ensuring that the font-size override comes after the original declaration

or use one of the several ways to become more specific (see CSS specificity[1])

[1] http://www.w3.org/TR/selectors/#specificity

Font Awesome CSS overriding my CSS

6 Answers