I am able to use a font-awesome icon as button text using the following 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>

However, I need to do this dynamically using 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>');

The above JQuery outputs the font-awesome element as a text tag, i.e. the button says <i class="fa fa-paper-plane" aria-hidden="true"></i> instead of showing the actual icon.

I am able to use a font-awesome icon as button text using the following 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>

However, I need to do this dynamically using 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>');

The above JQuery outputs the font-awesome element as a text tag, i.e. the button says <i class="fa fa-paper-plane" aria-hidden="true"></i> instead of showing the actual icon.

• javascript
• jquery
• html
• font-awesome

• Please read jQuery documentation to find out the difference between text() and html() – shuangwhywhy Commented Jan 30, 2017 at 12:09

4 Answers 4

Use .html() instead to add HTML tags to your DOM, else the .text() will add the code as text :

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

Hope this helps.

var submit_button = $("#submit");

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>

Change this line:

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

to

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

If you want a button only with a icon the better is to add the font class into the button :

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

You button will look at:

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

This is a jsFiddle with the previous HTML

https://jsfiddle/s0dw6yp4/1/

Change submit_button.text('...') to submit_button.html('...')

Text inserts the exact text you entered while html interprets the html-code.