出现了额外的图标标签，但 HTML 中只有 3 个

Question

在 this codepen 中，我有一排有 3 个 div 标签，每个 div 标签有 1 个图标标签。但是，我在 ID 列下方显示了 2 个额外的图标标签。这些额外的图标来自哪里？当我检查元素时，它似乎在我的容器 class 下，但它不在我的 html 中。谢谢。

这是我在 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>

Answer 1

因为有未关闭的<i>标签而出现：

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

出现了额外的图标标签，但 HTML 中只有 3 个

Extra icon tags appearing but only 3 in the HTML

html

css

font-awesome