How to put fontello icon in input value?

Question

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!

score 11 · Accepted Answer · answered Aug 26 '14 at 16:19

11

This should work:

<input type="submit" value="Send " style="font-family:icons" />

There are two steps:

use  to output character. You can find code in fontello css file, someting like content:'\f001', just do the replace \f001 -> .
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 " class="myfont" />

answered Aug 26 '14 at 16:19

Fancyoung

2,313
26
32

This answer is very cool, I didn't know you could do this. Usually I just use absolute positioning. – Nathaniel Flick Jan 02 '15 at 05:48
By default, the font-family for fontello is set as "font-family: fontello". – RobKohr Jun 30 '15 at 22:46
@RobKohr by default, the font-family is set as "font-family: fontello" only when you use the class, not for all fonts. – Fancyoung Jul 01 '15 at 01:20

Jatin · Answer 2 · 2014-06-12T22:38:56.280

0

You can try this in CSS:

input[type='submit'] {
    background-image: url(images/icon.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

Other Option is use button type="submit" instead of input

<button type="submit" class="btn btn-success">
    <i class='icon-right-circle'></i> Text
</button>

edited Jun 12 '14 at 22:38

answered Jun 12 '14 at 22:15

Jatin

3,065
6
28
42

That defeats the whole purpose of fontello. – Corey Jun 12 '14 at 22:28
This still doesn't answer my question. I'm aware of other methods of making the button work (your method, as well as making a simple anchor link and making it submit the form via JS). I'm asking if there is a way to put the icon in the value of an input. – Corey Jun 13 '14 at 01:02

How to put fontello icon in input value?

2 Answers2