CODEWITHSUNDEEP
htmlcssfont-awesome
Aown Muhammad
Aown Muhammad

Reputation: 156

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

Upvotes: 0

Views: 374

Answers (2)

Sbpro
Sbpro

Reputation: 988

That's because in your mark up, you are enclosing the Home text inside the span with the fa fa-home classes, so the css of the font-awesome is taking precedence over your div a font selection.

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


div {
 background-color:green;
 display:inline-block;
 color:#fff;
 font-size:50px;
}
div a {
  font-size:50px;
  display:inline-block;
  font-weight:bold;
  text-decoration:none;
  font-family:'arial';
  color:#fff;
}

Upvotes: 1

Carol McKay
Carol McKay

Reputation: 2424

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>

Upvotes: 1

Related Questions