Menu
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!
966
CSS has an awesome feature called Pseudo-elements . Using Pseudo-elements we can add content to the web page with just CSS. Font awesome uses ::before pseudo-element to add icons to the page using their CSS content codes.
Remove Font Awesome from your website by editing style.@import url(/css/font-awesome. min. css); or @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css); Once you delete these Font Awesome imports from CSS, Font Awesome will stop loading on your website.
Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0. 0).
Make your selector more specific :
.side-icon.fa
See here how the priorities of the selectors are calculated.
161
Hey you should target the before element :
.side-icon:before{
font-size:28px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
