font awesome(4.0.3) + bootstrap(3.0.0) + asp.net: changing font family

Question

I am using font awesome(4.0.3) and bootstrap(3.0.0) and I just want to change the font. But there is a problem. All the css-classes like "fa fa-group" from "font awesome" are not going to be displayed anymore,instead there is a small rectangle with the Unicode sign in it like "F06E"(seperated in 2 lines) (The text is formated, but the symbols are going to be converted to unicode-text).

HTML:

<li class="dropdown">
<a href="@Url.Action( "Management", "MasterData")" class="dropdown-toggle"><i class="fa fa-cog"></i> Stammdaten</a>
<ul class="dropdown-menu">
<li>@Html.ActionLink(" Verwaltung", "Management", "MasterData", null, new { @class = "fa fa-group" })</li>
</ul>
</li>

CSS:

.navbar .nav li  a {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif ;  
    text-decoration:underline;
}

What can I do ?!

Live-example on JSFiddle

Best regards Martin

Answer 1

The issue is that you have the FA classes on your Anchor tag. Instead, they need to belong on inline content (such as an Italic tag) as inner-html to the Anchor tag.

With this code (and using your JSFiddle example), you are trying to use two fonts on the same tag: the FA font for the icon and Helvetica for the normal text. This is also why it works on your Dropdown Toggle, but not on the dropdown elements.

Because you need inner HTML to the anchor, rather than just straight text, you need to use a different helper; use Url.Action, just like you have in the Dropdown Toggle, to build the link's HREF value, rather than Html.ActionLink to build the entire link tag.

Try this instead

<li class="dropdown">
  <a href='@Url.Action( "Management", "MasterData" )' class="dropdown-toggle"><i class="fa fa-cog"></i> Stammdaten</a>
  <ul class="dropdown-menu">
    <li><a href='@Url.Action( "Management", "MasterData" )'><i class="fa fa-group"></i> Verwaltung</a></li>
  </ul>
</li>