Невозможно динамически использовать шрифт Высокого значок кнопки

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 выводит шрифт удивительного элемента в виде текстового тега, то есть кнопка говорит <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('...')

Текст вставляет точное text Введенные в то время как html интерпретирует HTML-код.