How to Add Icons to Your Bootstrap Form

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 ...

Read More