javascript - 无法在提交按钮中动态使用 Font Awesome 图标

Question

我可以使用以下 HTML 将 Font Awesome 图标用作按钮文本:

<button tabindex="4" type="submit" id="submit" class="btn btn-primary btn-lg disabled" onclick="sendemail(); return false;"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>

但是，我需要使用 JQuery 动态执行此操作:

var contact_form = $('div#contact.pbmodal div.modal-dialog div.modal-content form');
var submit_button = contact_form.find('button#submit');
submit_button.text('<i class="fa fa-paper-plane" aria-hidden="true"></i>');

上面的 JQuery 将 font-awesome 元素输出为文本标签，即按钮显示 <i class="fa fa-paper-plane" aria-hidden="true"></i>而不是显示实际的图标。

Answer 1

使用 .html() 代替将 HTML 标签添加到您的 DOM，否则 .text() 会将代码添加为文本:

submit_button.html('<i class="fa fa-paper-plane" aria-hidden="true"></i>');

希望这对您有所帮助。

var submit_button = $("#submit");

submit_button.html('<i class="fa fa-paper-plane" aria-hidden="true"></i>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<button tabindex="4" type="submit" id="submit" class="btn btn-primary btn-lg disabled" onclick="sendemail(); return false;"></button>