I'm using Feather icons successfully inside a <textarea> like so:

<i data-feather="message-circle" class="fea icon-sm icons"></i> 
<textarea style="resize:none" required=""></textarea>

However, when I try to duplicate the row with a Javascript function, the icons do not show up.

$(wrapper).append('<i data-feather="message-circle" class="fea icon-sm icons"></i> 
<textarea style="resize:none" required=""></textarea>');

where wrapper is a div container

var wrapper = $(".container1");

EDIT: Full function

$(document).ready(function() {
    var max_fields      = 60;
    //var wrapper         = $(".container1");
    var wrapper = ".container1";
    var add_button      = $(".add_question_field");

    var x = 1;
    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
            $(wrapper).append('<div class="col-md-12"> <div class="form-group position-relative"> <label>Screening Question</label> <i data-feather="email" class="fea icon-sm icons"></i> <textarea style="resize:none" id="question" type="text" name="question" placeholder="Your Question" rows="5" class="form-control pl-5" required=""></textarea> </div> </div><!--end col--> <div class="col-md-12"> <div class="form-group position-relative"> <label>Answer</label> <i data-feather="email" class="fea icon-sm icons"></i> <textarea style="resize:none" id="answer" type="text" name="answer" placeholder="Answer" rows="5" class="form-control pl-5" required=""></textarea> </div> </div><!--end col--> <div class="col-md-12"> <div class="form-group position-relative"> <label>Keywords</label> <i data-feather="email" class="fea icon-sm icons"></i> <textarea style="resize:none" id="buzzwords" type="text" name="buzzwords" placeholder="Comma Separated Buzzwords and Phrases" rows="5" class="form-control pl-5" required=""></textarea> </div> </div>'); //add input box
            feather.replace()
        }
        else
        {
            alert('You Reached the limits')
        }
    });
});

I'm using Feather icons successfully inside a <textarea> like so:

<i data-feather="message-circle" class="fea icon-sm icons"></i> 
<textarea style="resize:none" required=""></textarea>

However, when I try to duplicate the row with a Javascript function, the icons do not show up.

$(wrapper).append('<i data-feather="message-circle" class="fea icon-sm icons"></i> 
<textarea style="resize:none" required=""></textarea>');

where wrapper is a div container

var wrapper = $(".container1");

EDIT: Full function

$(document).ready(function() {
    var max_fields      = 60;
    //var wrapper         = $(".container1");
    var wrapper = ".container1";
    var add_button      = $(".add_question_field");

    var x = 1;
    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
            $(wrapper).append('<div class="col-md-12"> <div class="form-group position-relative"> <label>Screening Question</label> <i data-feather="email" class="fea icon-sm icons"></i> <textarea style="resize:none" id="question" type="text" name="question" placeholder="Your Question" rows="5" class="form-control pl-5" required=""></textarea> </div> </div><!--end col--> <div class="col-md-12"> <div class="form-group position-relative"> <label>Answer</label> <i data-feather="email" class="fea icon-sm icons"></i> <textarea style="resize:none" id="answer" type="text" name="answer" placeholder="Answer" rows="5" class="form-control pl-5" required=""></textarea> </div> </div><!--end col--> <div class="col-md-12"> <div class="form-group position-relative"> <label>Keywords</label> <i data-feather="email" class="fea icon-sm icons"></i> <textarea style="resize:none" id="buzzwords" type="text" name="buzzwords" placeholder="Comma Separated Buzzwords and Phrases" rows="5" class="form-control pl-5" required=""></textarea> </div> </div>'); //add input box
            feather.replace()
        }
        else
        {
            alert('You Reached the limits')
        }
    });
});

• javascript
• html
• css
• icons

Share Improve this question Follow edited Jun 1, 2020 at 4:10 kmoser 9,31833 gold badges2626 silver badges4444 bronze badges asked May 31, 2020 at 23:23 user3050491user3050491 11544 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Did you make sure feather initiation script is at the end of body tag and after the custom script you're applying?

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg./feather-icons"></script>
  <body>

    <script>
      //your custom js here
      feather.replace()
    </script>
  </body>
</html>

Edit:

After looking at the full function edited in question, looks like problem is in the icon name 'email', change it to 'mail':

<i data-feather="email" class="fea icon-sm icons"></i>

jsfiddle playground: https://jsfiddle/6ebfvydg/1/

Load the data-feather script and put feather.replace(); inside the javascript function. Also change data-feather="email" to data-feather="mail" and it will work.