CODEWITHSUNDEEP
htmlcss
Elton Sousa
Elton Sousa

Reputation: 421

Adding font awesome from css

I added font awesome to my html but just figured that I would be better if add it through css instead because otherwise I'll have to add in each and every tag if I want it in multiple tags as my html code shows:

<ul>
    <li><strong><p>SERVICES</p></strong></li>
    <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Financial</a></li>
    <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Medical</a></li>
    <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Insurance</a></li>   
</ul>

How can I add those icons from my style sheet?

Upvotes: 0

Views: 239

Answers (1)

ghosthunter
ghosthunter

Reputation: 303

You can do that by inserting FontAwesome icon content property inside of your CSS.

For example:

a:before { 
    font-family: FontAwesome;
    content: "\f095";
}

DEMO

If you don't know how to get icon content, you can copy it from here:

LINK

And after that you can assign this icon to specific a tag, consider using a class instead to make it more specific:

a.class_name:before { 
    font-family: FontAwesome;
    content: "\f095";
}

Upvotes: 2

Related Questions