带搜索图标的HTML按钮？

我正在尝试创建一个搜索按钮，其中只包含放大镜搜索图标

代码如下

<div class="searchbox">
<form>
    <span><input type="text" class="search square" placeholder="Search...">
            <input type="button" value="&#xf002;">

</span>
</form>
</div>

他们都没有工作过。我还在这些教程的基础上更新了字体真棒 及

---

非常感谢您对我所做错事的任何帮助。

好吧，您对CSS的理解是正确的。试试这个，愿这个管用。我不确定

<input type="button" value="" id="searchButton" />

---

这就是你要找的吗

---

veer提到的背景速记属性可能会被浏览器忽略，因为“no repeat”正在写入两次。试着这样写：

背景：url（“”）无重复固定中心

还要检查您在url中指定的路径。如果图像位于单独的文件夹中，则可能需要添加“./”

附言。 虽然您的案例可能不需要它，但最好提及背景位置等属性（在上述案例中居中）。有时，浏览器会忽略整个属性。然而，我不确定为什么会发生这种情况，也不确定这是否是一个问题，或者这只是我代码中的其他错误。这种情况并不总是发生，但我已经面对这个问题2-3次了

您可以使用或中的图标，这对图标设计使用非常有用

下面是一个示例，使用glyphicon的搜索图标

<button class="icon"><i class="glyphicon glyphicon-search"></i></button>

<button class="icon"><i class="fa fa-search"></i></button>

或者使用Font Awesome的搜索图标

<button class="icon"><i class="glyphicon glyphicon-search"></i></button>

<button class="icon"><i class="fa fa-search"></i></button>

---

使用FontAwesome图标库并将其放入搜索按钮中

*{框大小：边框框；}
.表格组{
显示：-webkit flex；
-webkit柔性包装：包装；
显示器：flex；
柔性包装：包装；
边缘底部：1rem；
}
输入{
flex:1自动；
字体大小：400；
高度：计算（1.5em+1rem+2px）；
填充：.5rem1rem；
字体大小：1.25rem；
线高：1.5；
颜色：#495057；
背景色：#fff；
边框：1px实心#ced4da；
边界半径：.3rem 0.3rem；
大纲：0；
}
钮扣{
字体大小：400；
颜色：#ffffff；
光标：指针；
文本对齐：居中；
用户选择：无；
边框：1px实心透明；
填充：.5rem1rem；
字体大小：1.25rem；
线高：1.5；
边界半径：0.3rem.3rem0；
背景色：#007bff；
大纲：0；
}

感谢您尝试转向。这给了我和以前一样的东西，一个搜索框，后面跟着一个空按钮。我很感激你花了这么多时间。这不应该给你一个空按钮。一定有背景，我不知道我做错了什么。我编辑了我的searchbox div和它对应的css，然后复制并粘贴了你的html和css，它给了我一个空白的，没有任何搜索表单。感谢您在San中花费时间，非常感谢。请在您的答案中提供一些解释，并避免只发布代码答案。

<div class="search-bar">
<input type="text" class="sfield" name="searchterm" maxlength="30" value="Search...">
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">

.search-bar {
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
position:relative;
width:230px
}
.search-bar .searchbutton {
position:absolute;
top:23%;
right:5px;
}
.sfield {
float: left;
margin: 5px 0 0 8px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 125px
}

<button class="icon"><i class="glyphicon glyphicon-search"></i></button>

<button class="icon"><i class="fa fa-search"></i></button>