CODEWITHSUNDEEP
jquerysvgicons
user123
user123

Reputation: 443

Icons not showing using .html()

I'm working on simple form which display error messages, my problem is when I tried to add a icon on the alert messages, the icons is not showing. I'm using feathericons to generate the icons.

I made a simple snippet, the icons is showing normally but when I display it using jquery it doesn't work.

Hope you help me.

thanks.

$(document).ready(function(){
   feather.replace();
   
   $('button').click(function(){
      $('.alert').html('<i data-feather="activity"></i>');
   });
  
});
<script src="https://unpkg.com/[email protected]/dist/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>show Icon</button>
<div class="alert"></div>
<hr>
<i data-feather="home"></i>
<i data-feather="alert-circle"></i>
<i data-feather="globe"></i>

Upvotes: 2

Views: 9775

Answers (1)

Arun Kumar
Arun Kumar

Reputation: 218

Try This.

<script src="https://unpkg.com/[email protected]/dist/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>show Icon</button>
<div class="alert"></div>
<hr>
<i data-feather="home"></i>
<i data-feather="alert-circle"></i>
<i data-feather="globe"></i>

<script>
$(document).ready(function(){
   feather.replace();

   $('button').click(function(){
      $('.alert').html('<i data-feather="activity"></i>');
      feather.replace();
   });

});
</script>

Upvotes: 7

Related Questions