第一个解决方案：设计外部/父div
第一个
第二个解决方案：-设置父div相对位置，并使用绝对位置移动搜索图标。

.search-bar {
    position: relative;
}
.fa.fa-search {
    position: absolute;
    z-index: 999;
    right: 10px;
}

You need position absolute.
Something like this would work: just add this to your code

.search-bar {
  position: relative; //the child will orientate on this parent

}
.search-bar a { // this a tag should include your image
  position: absolute; //so the a tag sits on top of the input
  bottom: 0; // distance from bottom (parent div)
  top: 0; // distance from top (parent div)
  right: 0.5rem; // distance from right (parent div)
}

Aswell you should add some padding to the right in your input-field, to prevent from input text being under the image.
Hope this helps you!

here is working example

I just wrapped input and icon into label tag and changed some styles

第一次