無法在提交按鈕中動態使用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> 

Answer 2

改變這一行：

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

至

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

Answer 3

如果您只想要一個帶圖標的按鈕，最好將字體類添加到按鈕中：

submit_button.addClass('fa fa-paper-plane');

你按鈕會看：

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

這是一個jsFiddle與以前的HTML

https://jsfiddle.net/s0dw6yp4/1/

Answer 4

將submit_button.text('...')更改為submit_button.html('...')

當html解釋html代碼時，文本會插入您輸入的確切text 。