font icon not displaying in ajax in html

I have a tab like below and I am trying to display results through ajax inside this tab, in each tab content I have added ordered list and font icon as below code:

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

here the problem is only ordered list is coming and the font icon is not displaying.

Can anyone please tell me what wrong did I do here ?

Thanks in advance

1 thought on “font icon not displaying in ajax in html”

  1. I don’t understand properly but I try, you write wrong class in jQuery is ="tabcontent" instead of "tab-content". and second is you use "ul" in tag and you use "ol" in jQuery

    "Code Snippet" is not load js property that’s why I use codepen.(I delete pen after you show it.)

    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>");});
    
    Reply

Leave a Comment