Font Awesome CSS overriding my CSS

Question

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!

Answer 1

Make your selector more specific :

.side-icon.fa

See here how the priorities of the selectors are calculated.

Answer 2

Hey you should target the before element :

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