無法動態地使用字體真棒圖標提交按鈕

Question

我可以使用下面的HTML使用字體真棒圖標，按鈕上的文字：

<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輸入的確切text解釋HTML代碼。