Put search icon near textbox using bootstrap

Question

I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox.

My code is like this:

Answer 1

You can do it in pure CSS using the :after pseudo-element and getting creative with the margins.

Here's an example, using Font Awesome for the search icon:

.search-box-container input {
  padding: 5px 20px 5px 5px;
}

.search-box-container:after {
    content: "\f002";
    font-family: FontAwesome;
    margin-left: -25px;
    margin-right: 25px;
}