CODEWITHSUNDEEP
jqueryfont-awesome
Requin Creative
Requin Creative

Reputation: 123

Button Input Types, can I use Font Awesome Icons as a part of the value (Button Text)

I have a multi-page form that is button driven and I would like to know if it is possible to use jQuery to add awesome icons in the rendered button:

<input type="button" value="Contact Us" />

I would like to use http://fontawesome.io/icon/phone-square/ (Unicode f098)

Thanks

Upvotes: 0

Views: 890

Answers (2)

vidriduch
vidriduch

Reputation: 4863

you can do something like this:

<button type="button"><i class="fa fa-phone-square"> Contact Us</i></button>

if you have to use the then try this (no need for js ...):

<input type="button" class="fa" value="&#xf098; Contact Us" />

this is the unicode value of fa-phone-square

&#xf098;

and tiny fiddle :) https://jsfiddle.net/cq27e802/

Upvotes: 1

Sam Battat
Sam Battat

Reputation: 5745

Thank you vidriduch. I am using a Wordpress form plugin that renders the buttons automatically so I can't change the form elements. I would have to manipulate them. And they are output as input[type="button"] and not as button so I have to contend with the element value rather than the html – Requin Creative 11

$('input[type=button][value="Contact Us"]').replaceWith('<button type="button"><i class="fa fa-phone-square"> Contact Us</i></button>');

DEMO: http://jsfiddle.net/LcL55bgs/

Upvotes: 1

Related Questions