Duplicated FontAwesome Icons on Bootstrap Navbar

Question

I'm currently working on my navbar and I'm stuck with this :

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

As you can see there is a duplicated icons for each ...

I'm using Bootstrap 2.3.2 and 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">

For the titles I'm using the ng-repeat attribute (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"}];

I don't know what I'm doing wrong. Any clue ?

Thanks.

In fact, thanks to Jon Kartago Lamida, the problem seem to be coming from the < i > element and replacing it by the < span > element solve it.

Answer 1

Honestly I don't know what is html element is. But when I replace it with , it seems worked. It not duplicate the icon anymore. Please check it here http://plnkr.co/edit/Ydz3Cnuc0tnRtecFR3K5