html怎么在搜索框中加图片,html – 如何在搜索框中添加图标

要涵盖的问题：

如何在搜索框/表单中添加图标

如何在输入字段中添加图标

我有以下问题,我无法将FontAwesome fa-search图标放在输入字段/搜索框的右侧.

这是我的原始代码：

@media screen and (min-width: 800px) {

#header-search-desktop-div {

position: absolute;

left: 180px;

width: 450px;

margin-top: 0;

margin-bottom: 0;

border: 1px solid #881d98;

border-radius: 24px;

}

#header-search-desktop-div #header-search-fa {

position: absolute;

color: #7E7E7E;

z-index: 100;

font-size: 27px;

}

#header-search-desktop-div .fa-search {

top: 5%;

left: 1.5%;

line-height: 0.8em;

}

}

以下代码我收到了答案并进行了更改,它现在的工作方式与上面的图片链接类似：

#header-search-submit {

position: absolute;

z-index: 1;

padding: 0;

right: 15px;

top: 6px;

font-size: 24px;

font-family: FontAwesome;

color: #7B7B7B;

cursor: pointer;

background: 0;

border: 0;

}