add html+text to input of type submit using javascript

Question

I am using a smartsearchbox webpart, and I am adding the text value of its submit input using javascript, like this:

$("#p_lt_ctl02_pageplaceholder_p_lt_ctl03_SmartSearchBox1_btnSearch").val('{%GetResourceString("search")%}');

now I want to append to the value a search icon using fontawesome library, how can I achieve that with javascript?

Answer 1

You could do it using the unicode version of the icon. You would also need to add the "fa" class unless you have already applied the fontawesome font family via another style/class or method:

$("#p_lt_ctl02_pageplaceholder_p_lt_ctl03_SmartSearchBox1_btnSearch").addClass("fa").val("\uf002 {%GetResourceString("search")%}");

Solution based on Font-awesome, input type 'submit'

See this answer for potentially adding a custom class instead of using "fa" that would prevent your site font from being overridden for the button text https://stackoverflow.com/a/11703274/1435302