CODEWITHSUNDEEP
htmlcssfont-awesome
Umut Gür
Umut Gür

Reputation: 387

I can't change font awesome's style

I downloaded a web site template from this link. How can I change the icon's style in the navigation menu of the index.html page?

<i class="fa fa-home" style="color:black; font-size:48px"></i><a href="index.html">Home</a>

This didnt work

So I introduced the style through a new class "fa-home-a"

.fa-home-a {
color:black;
}

and changed my html to this

<i class="fa fa-home fa-home-a"></i><a href="index.html">Home</a>

but this didnt work as either

Upvotes: 0

Views: 1418

Answers (3)

raw_hitt
raw_hitt

Reputation: 989

Don't use the modified class use the original class that is fa-home and apply external css which is

.fa-home { color:black; font-size:80px; }

If this does not works then you will have to give the refrence of the parent class

Upvotes: 1

Umut G&#252;r
Umut G&#252;r

Reputation: 387

I found the solution. I added "color" property to following piece of code

#hornav li [class^="fa-"]:before,
#hornav li [class*=" fa-"]:before {
...
color:#ffd602;
}

Upvotes: 0

user3657227
user3657227

Reputation: 67

 <i class="fa fa-home" style="color:black; font-size:48px"></i><a href="index.html">Home</a>

I want to say that the problem is coming from the inline-style reference, there is a missing semi-colon ;

Upvotes: 0

Related Questions