带有搜索图标的 HTML 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19945281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML button with search icon?
提问by user2632376
I'm trying to create a search button containing nothing but the magnifying glass search icon.
我正在尝试创建一个只包含放大镜搜索图标的搜索按钮。
Code is below
代码如下
<div class="searchbox">
<form>
<span><input type="text" class="search square" placeholder="Search...">
<input type="button" value="">
</span>
</form>
</div>
After reading all the posts on the topic I could find I've also tried the following 3 options in line 4
阅读有关该主题的所有帖子后，我发现我还尝试了第 4 行中的以下 3 个选项
<input type="button" value="filepath/icon.png">
<i class="icon-search icon-2x">
<i class="icon-search"></i></button>
as well as this html
以及这个html
<input type="button" value="Search" class="button_add">
with this css
用这个 css
input.button_add {
background-image: url(filepath/icon.png);
background-color: transparent;
background-repeat: no-repeat;
background-position: 0px 0px;
border: none;
cursor: pointer;
height: 50px;
width: 50px;
padding-left: 16px;
vertical-align: middle;
}
None of them have worked. I've also updated font awesome based on these tutorials http://cirquedumot.com/font-awesome/and http://www.youtube.com/watch?v=BdyI6T-_7ts
他们都没有工作。我还根据这些教程更新了很棒的字体 http://cirquedumot.com/font-awesome/和http://www.youtube.com/watch?v=BdyI6T-_7ts
Any help on what I'm doing wrong would be much appreciated.
对我做错了什么的任何帮助将不胜感激。
回答by Jeff Hu
You may use icons from Glyphiconsor Font-Awesome, which are useful for icon design usage.
您可以使用来自Glyphicons或Font-Awesome的图标，它们对图标设计使用很有用。
Here's an example, using glyphicon's search icon
这是一个示例，使用 glyphicon 的搜索图标
<button class="icon"><i class="glyphicon glyphicon-search"></i></button>
Or using Font Awesome's search icon
或者使用 Font Awesome 的搜索图标
<button class="icon"><i class="fa fa-search"></i></button>
回答by San
is that what you are looking for http://jsfiddle.net/cancerian73/t2FJb/
这就是你要找的 http://jsfiddle.net/cancerian73/t2FJb/
<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
}
回答by Rishit Shah
The background shorthand property mentioned by veer might be getting ignored by the browser as "no-repeat" is being written twice. Try writing it this way:
veer 提到的背景速记属性可能会被浏览器忽略，因为“无重复”被写入两次。尝试这样写：
background: url("") no-repeat fixed center;
背景： url("") 无重复固定中心；
also check the path you specify in the url. if your images are in a separate folder you may have to add a "../" .
还要检查您在 url 中指定的路径。如果您的图片在单独的文件夹中，您可能需要添加一个 "../" 。
P.S. Although it may not be needed for your case it is good practice to mention the properties like background-position(center in above case). Sometimes otherwise the entire property gets ignored by the browser. I'm not sure however why this happens neither am i sure if this is actually a problem or it was just some other error in my code. Does not happen always but i have faced this issue 2-3 times.
PS 尽管您的情况可能不需要它，但最好提及诸如背景位置（在上述情况下为中心）之类的属性。有时，浏览器会忽略整个属性。但是，我不确定为什么会发生这种情况，我也不确定这是否真的是一个问题，或者它只是我的代码中的其他一些错误。并不总是发生，但我遇到过这个问题 2-3 次。
回答by Veer Shrivastav
Well, you are quite right with the CSS. Try this, may this work. I am not sure about it.
好吧，您对 CSS 的看法是正确的。试试这个，可能会起作用。我不确定。
<input type="button" value="" id="searchButton" />
Add CSS:
添加 CSS：
#searchButton:
{
background:url('filepath') no-repeat no-repeat;
width: 20px;
height: 20px;
border: 0px;
}
回答by Vishal
Use FontAwesome Icon library and put <i class="fa fa-search"></i> inside your search button.
使用 FontAwesome Icon 库并将 <i class="fa fa-search"></i> 放在您的搜索按钮中。
* {box-sizing: border-box;}
.form-group {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
}
input {
flex: 1 1 auto;
font-weight: 400;
height: calc(1.5em + 1rem + 2px);
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: .3rem 0 0 .3rem;
outline: 0;
}
button {
font-weight: 400;
color: #ffffff;
cursor: pointer;
text-align: center;
user-select: none;
border: 1px solid transparent;
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0 .3rem .3rem 0;
background-color: #007bff;
outline: 0;
}<!-- Load an icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form action="">
<div class="form-group">
<input type="text" placeholder="search...">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</form>