Add font awesome icons to Bootstrap 4 input

Note
Before you run this code, make sure you have jQuery 3.x, Bootstrap 4.x, and Font Awesome 4.x in the same order.

HTML

CSS

body {
  padding: 12px;
}

.search-class {
  border: none;
  background: #ffffff;
}

.icon-search {
  border: 1px solid #f2f2f2;
  border-top-left-radius: .25em;
  border-bottom-left-radius: .25em;
  border-right: none;
  padding-right: 0;
}

.input-search {
  border: 1px solid #f2f2f2;
  border-top-right-radius: .25em;
  border-bottom-right-radius: .25em;
  border-left: none;
}

.input-search:focus {
  border-color: #f2f2f2;
}

.search-class-width {
  max-width: 400px;
}

Demo