Font Icons in Submit Input in Forms

Font icons like FontAwesome are widely used than the old-school image icons. It can be scaled to any size without losing it's sharpness and you can save a lot of HTTP request at the same time.

But in a few cases font icons can prove to be an obstacle in your web design, here we are talking about adding icon fonts in <input type='submit' value='Submit'>

Ways to Get it Working

There are two simple ways to achieve this. The first one is the most widely used technique which includes using the <button> tag in replacement to <input type='submit'> as the button tag can contain children which is generally required for adding icons (there are other ways using CSS but that doesn't work on the input element either)

Using Button as Submit Input

The problem with the normal submit input tag is that it can't contain children and neither the ::after pseudo-element in CSS which is why it becomes a bad choice for adding font icons to.

To the rescue we have the button element which can be used in place of the submit input type. We will assume you are using the FontAwesome Icon fonts. All we need to do is this.

<input type='text' value='' placeholder='Enter some text..'>
<button type='submit'>
  <i class='fa fa-search'></i>
</button>

That's all to it. You just add the code for your icon font inside the button element and tada! Here's a live preview:

Submit Input and Font Icons

Using the Normal Submit Input

There's a way to add icon fonts also in the default submit inputs, but it's something I don't recommend to use, well it doesn't have any bad effect though.

The default <input type='submit'> display only the value you define in its value attribute. If we use the icon's Unicode entity in its value field we can get icons to work on that too. This is how it looks:

<input type='text' value='' placeholder='Enter some text..'>
<input type="submit" class="fa-fa" value="&#xf1b0; or Text">

We would need this CSS with it.

.fa-fa {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

And a live preview..

Submit Input and Font Icons

Remember that you need the UTF entity of the font icon you will be using. Most Font Icon provides a cheat-sheet which lists all it's icons and their UTF entity.