I'm currently working on my navbar and I'm stuck with this :
https://i.sstatic.net/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.
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