css - Font Awesome (4.0.3)+ bootstrap(3.0.0)+ asp.net : changing font family

Question

我正在使用 font Awesome(4.0.3) 和 bootstrap(3.0.0)，我只想更改字体。 但有一个问题。 所有像“font Awesome”中的“fa fa-group”这样的CSS类都不会再显示，取而代之的是一个带有Unicode符号的小矩形，如“F06E”(分成两行)(文本已格式化，但符号将转换为 unicode 文本)。

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;
}

我能做什么？!

Live-example on JSFiddle

最诚挚的问候马丁

Answer 1

问题是您的 Anchor 标签上有 FA 类。相反，它们需要属于内联内容(例如斜体标签)，作为 Anchor 标签的inner-html。

通过此代码(并使用您的 JSFiddle 示例)，您尝试在同一标签上使用两种字体:图标的 FA 字体和普通文本的 Helvetica 字体。这也是为什么它适用于下拉切换，但不适用于下拉元素。

因为您需要 anchor 的内部 HTML，而不仅仅是直接文本，所以您需要使用不同的帮助器；使用 Url.Action(就像在下拉切换中一样)来构建链接的 HREF 值，而不是使用 Html.ActionLink 来构建整个链接标记。

试试这个

<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>