Adding Icons to Input Fields with Bootstrap

In this tutorial, we will explore how to add icons to input fields using Bootstrap. This is a common design pattern used in web applications to provide visual cues and enhance user experience.

Introduction to Bootstrap Icons

Bootstrap provides a set of predefined icons, known as Glyphicons, which can be used to add visual interest to your application. These icons can be used in various contexts, including input fields.

Adding Icons to Input Fields without Bootstrap

To add an icon to an input field without using Bootstrap’s built-in functionality, you can use CSS to position the icon absolutely within a container element. Here is an example of how you can achieve this:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Adding Icons to Input Fields with Bootstrap

Bootstrap provides a built-in way to add icons to input fields using the has-feedback class. This class is used in conjunction with the form-control-feedback class to position the icon within the input field.

Here is an example of how you can use this functionality:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

This will add a user icon to the right of the input field. If you want to add the icon to the left, you can use the has-feedback-left class in addition to the has-feedback class.

<div class="form-group has-feedback has-feedback-left">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Note that the has-feedback-left class is not a standard Bootstrap class, but rather a custom class that can be used to achieve left-aligned icons.

Best Practices

When adding icons to input fields, make sure to use the correct classes and HTML structure to ensure proper positioning and styling. Additionally, consider using a consistent icon set throughout your application to maintain a cohesive visual design.

Conclusion

In this tutorial, we explored how to add icons to input fields using Bootstrap. We covered both methods of adding icons without using Bootstrap’s built-in functionality and using the has-feedback class. By following these examples and best practices, you can enhance the user experience of your web application with visually appealing icon-based input fields.