Aown Muhammad Aown Muhammad - 4 months ago 10
CSS Question

Unable to change font-family while using fontawsome in project

I have a menu, I want to insert fontawsome icons in the menu. I have following code

HTML

<div>
<a href="#" ><span class="fa fa-home">Home</span></a>
</div>


CSS

div a {
font-size:50px;
display:block;
color:white;
font-weight:bold;
text-decoration:none;
background-color:green;
font-family:'Segoe UI';
}


I want menu items to appear as block so that user can click on icons to open link, To achieve that I have to insert icon inside
<a>
tag. But after doing so I am unable to change font-family. I can change size and color but can't change family. I have tried many solutions but nonthing happened.
Is there anyway to change font-family?

JS Fiddle

Answer

You don't need to wrap any text with your font-awesome html element, so what you should have is:

<div>
    <a href="#" ><span class="fa fa-home"></span>Home</a>
</div>
Comments