Blog

Icons can be a great addition to your HTML form. Not only will they make your form look great, they'll help avoid user mistakes. Humans can recognize pictures (like an envelope) much more quickly than they can read words (like "Email").

To add icons to your form, you need to understand how to do 2 things:

1. Append or prepend addons to your form fields
2. Add icons to the addons using icon fonts

Form Field Addons

A typical Bootstrap form field looks like this:

<div class="form-group">
	<label class="control-label" for="email">
		Email
	</label>
	<input class="form-control" id="email" name="email" type="text"/>
</div>

We can prepend or append text or HTML to the field by wrapping the input with a .input-group <div> and then including a .input-group-addon with the <div>. So, to prepend the earlier field with an @ would look like this:

<div class="form-group">
  <label class="control-label" for="email">
    Email
  </label>
  <div class="input-group">
    <div class="input-group-addon">
      @
    </div>
    <input class="form-control" id="email" name="email" type="text"/>
  </div>
</div>

If we add the .input-group-addon <div> after the <input>, then the text is appended to the <input>.

You can apply CSS to the class .input-group-addon to change the font color and background color of your addon. Here is a simple illustration:

<style>
.input-group-addon{color:#ff0000; background-color: #ffffff;}
</style>

Easy enough, right? The next step is to add HTML to create an icon within the .input-group-addon <div>.

Adding Icons to your Addons

The easiest way to add icons to your page is by by using font-based icons. Bootstrap supports Glyphicon icons out of the box. They look something like this:

To use these icons, you must:

1. Make sure the font files will are located in the ../fonts/ directory, relative to the compiled CSS files. Boostrap expects this.
2. Create an HTML element (e.g. <span>) that you want to contain your icon.
3. Add .glyphicon to the HTML element you want to contain an icon.
4. Add a class that specifies the icon you which to use (e.g .glyphicon-minus)

So, to prepend our email input with a Glyphicon input would require the following HTML:

<div class="form-group ">
  <label class="control-label " for="email">
   Email
  </label>
  <div class="input-group">
   <div class="input-group-addon">
	<span class="glyphicon glyphicon-envelope"></span> 
   </div>
   <input class="form-control" id="email" name="email" type="text"/>
  </div>
 </div>
 

Behind the scenes, Bootstrap CSS replaces the content of the <span> with the character in the font that corresponds to an envelope to create the following result:

For a greater variety of icons (offered under a free MIT license), you might consider my personal favorite library: Font Awesome. Here is what the icons look like.

Font Awesome works the same way as the Glyphicon with a few tweaks. Here is how to use it:

1. Embed Font Awesome on your webpage using a CDN. This is necessary because unlike Glyphicon, Font Awesome isn't part of Bootstrap CSS.

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2. Create an <i> element to contain your icon (this is a Font Awesome convention).
3. Add .fa to the <i> element.
4. Add a class that specifies the icon you which to use (e.g .fa-minus)

Using Font Awesome, we can create an envelope addon with this HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<div class="form-group ">
  <label class="control-label " for="email">
   Email
  </label>
  <div class="input-group">
   <div class="input-group-addon">
	<i class="fa fa-envelope-o"></i> 
   </div>
   <input class="form-control" id="email" name="email" type="text"/>
  </div>
 </div> 

An Easier Way: Form Builder

It is easy enough to create addons and icons, but it can quickly get tedious if you are making forms of any length. Fortunately, you can use our Bootstrap Form Builder to create adddons and add Font Awesome Icons to your fields. Here is what you need to do:

1. Open our free Bootstrap Form Builder in your browser.
2. Add a field from the "Add a Field" tab
3. Select "Icon" from the Prepend or Append dropdown in the "Edit Fields" tab
4. Choose an icon from the icon picker window
5. Style the icon's color and background color in the "Settings" tab

Reference: Learn more about addons in the official Bootstrap docs.