Question

我正在使用我的导航栏，我坚持这个：

http://i.stack.imgur.com/f0pBR.png

正如您所看到的，每个人都有一个重复的图标......

我正在使用Bootstrap 2.3.2和FontAwesome 4.0.3

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

对于标题我正在使用ng-repeat属性（AngularJS）ng-repeat：

<!-- HTML -->
<ul class="nav">
    <li ng-repeat="tab in tabs" ng-class="{active:isActive(tab.href)}">
        <a href="#{{tab.href}}">
            {{tab.label}} <i ng-class="tab.ico">
        </a>
    </li>
</ul>

-

/* JS Ctrl */
$scope.tabs = [{label: "Title 1", href: "/Page1", ico: "fa fa-trophy"},
               {label: "Title 2", href: "/Page2", ico: "fa fa-globe"},
               {label: "Title 3", href: "/Page3", ico: "fa fa-whatever"},
               {label: "Title 4", href: "/Page4", ico: "fa fa-rt"}];

我不知道我做错了什么。任何线索？

感谢。

事实上，多亏了Jon Kartago Lamida，问题似乎来自＆lt;我＆gt;元素并用＆替换它。 span＆gt;元素解决它。

Answer 1

老实说，我不知道html元素是什么。但是当我用它替换它时，似乎有效。它不再复制图标了。请在此处查看http://plnkr.co/edit/Ydz3Cnuc0tnRtecFR3K5

Bootstrap Navbar上重复的字体真棒图标

1 个答案: