How to put fontello icon in input value?

html fontello
Corey picture Corey · Jun 13, 2014 · Viewed 8.1k times · Source

Say I have this code:

<input type="submit" value="Send" />

But after the text "Send" I want to have a fontello icon. Obviously this doesn't work:

<input type="submit" value="Send <i class='icon-right-circle'></i>" />

In my fontello demo.html file, the code for that icon is 0xe81c. Isn't there a away to put this icon in the input value? Like as an HTML entity or something?

Thanks!

Answer

Fancyoung picture Fancyoung · Aug 26, 2014

This should work:

<input type="submit" value="Send &#xf001;" style="font-family:icons" />

There are two steps:

  1. use &#xf001; to output character. You can find code in fontello css file, someting like content:'\f001', just do the replace \f001 -> &#xf001;.

  2. set font-family for this element. I use icons in my code, you should check the font name in css file.

Further step: You can customize your own class:
.myfont { font-family:icons; }

and the html will be:
<input type="submit" value="Send &#xf001;" class="myfont" />

Related questions

How do I use icons from fontello in my css?

I've been using entypo (downloaded from entypo.com), and displaying the icons like so: .icon:before { display: inline-block; font-family: 'Entypo'; text-decoration: none; speak: none; } .email:before { content: "\2709"; } Pretty standard. But since the hinting is off when you download it from …

Read More
How to create an HTML button that acts like a link?

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible. I would also like it so …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More