html 中的 ajax 中未显示字体图标

Question

我有一个如下所示的选项卡，我试图通过此选项卡内的 ajax 显示结果，在每个选项卡内容中我添加了排序列表和字体图标，如下代码所示：

$(document).ready(function(){   
    $("ol li").prepend("<i class='fa fa-check-square-o' style='margin-right:10px;'></i>");
    $(".tabcontent p").prepend("<i class='fa fa-check-square-o' style='margin-right:10px;'></i>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="exTab1">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="#1a" data-toggle="tab">Inclusions</a>
    </li>
    <li><a href="#2a" data-toggle="tab">Description</a>
    </li>
    <li><a href="#3a" data-toggle="tab">Points To Note</a>
    </li>
    <li><a href="#4a" data-toggle="tab">Terms</a>
    </li>
  </ul>

  <div class="tab-content clearfix">
    <div class="tab-pane active" id="1a">

    </div>
    <div class="tab-pane" id="2a">

    </div>
    <div class="tab-pane" id="3a">

    </div>
    <div class="tab-pane" id="4a">

    </div>
  </div>
</div>

这里的问题是只有有序列表来了，字体图标没有显示。

谁能告诉我我做错了什么？

提前致谢

Answer 1

我没看懂但是我试试，你写错了 class 在 jQuery 是 ="tabcontent" 而不是 "tab-content"。其次是在标签中使用“ul”，在 jQuery

中使用“ol”

“代码片段”不加载 js 属性这就是我使用 codepen 的原因。（显示后我删除了笔。）

https://codepen.io/Lucifer18/pen/abBJXRa

Jquery

$(document).ready(function(){   
$("ul li").prepend("<i class='fa fa-check-square-o' style='margin-right:10px;'></i>");
$(".tab-content ").prepend("<i class='fa fa-check-square-o' style='margin- 
right:10px;'></i>");});

html 中的 ajax 中未显示字体图标

font icon not displaying in ajax in html

html

javascript

ajax

tabs

font-awesome