CODEWITHSUNDEEP
cssfont-awesome
I dont believe you
I dont believe you

Reputation: 11

Font Awesome Font Size doesnt change

You can see icons like twitter,youtube etc. on the header.It build with font awesome.I tried change it but I couldnt.

http://www.hekim.deniz-tasarim.site/

I want to make it like this

font-size: 16px; line-height: 16px;

So, I write this code:

 echo "<li class=\"li-social-class\"><a href=". $redux_demo['text-twitter-link'] . ">
        <i class=\"fa fa-4x fa-twitter-square li-social-class\"></i></a></li>";

<style>
.li-social-class {
font-size: 16px; line-height: 16px;
}
</style>

but mega menu plugin on wordpress write 14 px for it and its css overwrite on mine.

How can I change its font css to what I want?

Upvotes: 0

Views: 54

Answers (2)

Kilian Perdomo Curbelo
Kilian Perdomo Curbelo

Reputation: 1348

The problem is that your website is using another css rule that sets the FA font size to 14px using !important, you can check it out in the file /wp-content/plugins/wp-megamenu/assets/css/wpmm.css:

.fa{
    font: normal normal normal 14px/1 FontAwesome !important;
}

This means that any element that involves a .fa will use this style, no matter if you write a more specific rule, as important overrides any subsequent rule.

So, in this scenario, your best and probably only choice is to force your own style with another important:

.li-social-class {
    font-size: 16px !important; 
    line-height: 16px;
}

By the way, this shows why using important is considered a bad practice. It makes css rules hard to override and hard to debug when a conflict shows up. Actually, the correct solution would be to get rid of the original !important and just override the style with a more specific rule. But since the wpmm.css file seems to come from a third party plugin, this would cause trouble in case of a eventual plugin update, as you would lose your changes.

Upvotes: 0

John
John

Reputation: 5335

You're not containing your echo correctly. Try this:

echo '<li class="li-social-class"><a href="'. $redux_demo["text-twitter-link"] . '">
        <i class="fa fa-4x fa-twitter-square li-social-class"></i></a></li> <style>
.li-social-class {
font-size: 16px; line-height: 16px;
}
</style>';

Upvotes: 1

Related Questions