Javascript 内的羽毛图标附加未显示

Question

我在 <textarea> 中成功使用了羽化图标，如下所示：

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

但是，当我尝试使用 Javascript 函数复制行时，图标没有显示。

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

其中 wrapper 是一个 div 容器

var wrapper = $(".container1");

编辑：完整功能

$(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')
        }
    });
});

Answer 1

您是否确定羽毛启动脚本位于 body 标记的末尾并且在您正在应用的自定义脚本之后？

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

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

编辑：

查看有问题编辑的完整功能后，问题似乎出在图标名称 'email' 中，将其更改为“mail”：

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

jsfiddle 操场： https://jsfiddle.net/6ebfvydg/1/

Javascript 内的羽毛图标附加未显示

Feather Icons inside Javascript append not showing up

html

javascript

css

icons