CODEWITHSUNDEEP
htmlcssfont-awesome
martinbshp
martinbshp

Reputation: 1163

Extra icon tags appearing but only 3 in the HTML

In the this codepen I have a row with 3 div tags and each div tag has 1 icon tag. However, I am getting 2 extra icon tags showing below the ID column. Where are theses extra icons coming from? When I inspect element it appears to be under my container class but it is not what is in my html. Thank you.

This is what I have in the html:

<div class="row">
  <div class="col-4"><span ng-click="sortBy('ID')">ID <i id="id-caret" class="fa fa-caret-down"></i></span></div>
  <div class="col-4"><span ng-click="sortBy('Name')">Bird Name <i id="bird-name-caret" class="fa fa-caret-down"></i></span></div>
  <div class="col-4"><span ng-click="sortBy('Type')">Type of Bird <i id="bird-type-caret" class="fa fa-caret-down"</i></span></div>
</div>

Upvotes: 0

Views: 54

Answers (1)

StepUp
StepUp

Reputation: 38094

It occurs because of there is unclosed <i> tag:

<div class="col-4">
    <span ng-click="sortBy('Type')">Type of Bird 
        <i id="bird-type-caret" class="fa fa-caret-down"></i>
    </span>
</div>

Upvotes: 1

Related Questions