CODEWITHSUNDEEP
cssclassfont-awesome
squidg
squidg

Reputation: 357

Add Font Awesome Icon To Class

Does anyone know how to add a specific font awesome icon to it's own class?

For example, I'm using this icon:

<i class="fa fa-home" aria-hidden="true"></i>

and have added:

.fa-home{
background: #ff0019;
padding: 5.2px 6.5px 8.5px 6.5px;
border-radius: 50%;
}
.fa-home:hover{

background: #333;
}
.fa-home:before {
color:#FFFFFF;
}

However, i want to use .fa-home in different areas of my website without that specific style.

Any ideas?

Upvotes: 0

Views: 3150

Answers (1)

user2940296
user2940296

Reputation: 153

Add an id to that particular font awesome icon that you want to style.

<i class="fa fa-home" id="edit" aria-hidden="true"></i>

And then change the css like this-

#edit.fa-home{
background: #ff0019;
padding: 5.2px 6.5px 8.5px 6.5px;
border-radius: 50%;
}
#edit.fa-home:hover{
background: #333;
}
#edit.fa-home:before {
color:#FFFFFF;
}

Assigning this id will only change those icons that contain it in their tags. This style will not be applied to the icons without id "edit".

Upvotes: 1

Related Questions