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

2 thoughts on “font icon not displaying in ajax in html”

Leave a Comment