需要回答的问题:
如何在搜索框/表单中添加图标
如何在输入框中添加图标
我遇到了以下问题,即无法使FontAwesome fa-search图标位于输入框/搜索框的右侧。
这是表单的图像:
网站页眉上的HTML搜索表单
表单链接(非常经典):
https://www.themirrorman.co
这是我的原始代码:
@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;
}
}
<div id="header-search-desktop-div">
<form role="search" method="get" class="searchform" action="https://themirrorman.co/">
<span id="header-search-fa" class="fa fa-search">
<input id="header-search-desktop-input" name="product-search" type="text" value="" placeholder="Product Search…">
<input type="hidden" name="post_type" value="product" />
</span>
</form>
</div>
#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;
}
<div id="header-search-desktop-div">
<form id="header-search-form" role="search" action="https://themirrorman.co/" method="get">
<fieldset>
<span class="text">
<input id="header-search-desktop-span" style="border-radius: 24px;" type="text" value="" name="s" class="s" placeholder="I am looking for..." />
<input id="header-search-submit" type="submit" value="" name="post_type" />
</span>
</fieldset>
</form>
</div>