带有搜索图标的 HTML 按钮？

Question

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

代码如下

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

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

在阅读了有关该主题的所有帖子后，我发现我还在第 4 行尝试了以下 3 个选项

<input type="button" value="filepath/icon.png">
<i class="icon-search icon-2x">
<i class="icon-search"></i></button>

还有这个html

<input type="button" value="Search" class="button_add">

使用这个 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;     
}

他们都没有工作。我还根据这些教程更新了很棒的字体 http://cirquedumot.com/font-awesome/ 和 http://www.youtube.com/watch?v=BdyI6T-_7ts

对我做错的任何帮助将不胜感激。

Answer 1

您可以使用来自Glyphicons 或Font-Awesome 的图标，它们对图标设计使用很有用。

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

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

或者使用 Font Awesome 的搜索图标

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

Answer 2

这就是你要找的 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
}

Answer 3

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

背景：url("") 不重复固定中心；

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

附： 尽管您的情况可能不需要它，但最好提及诸如背景位置（在上述情况下为中心）之类的属性。有时，浏览器会忽略整个属性。但是我不确定为什么会发生这种情况，我也不确定这是否真的是一个问题，或者只是我的代码中的一些其他错误。并不总是发生，但我遇到过这个问题 2-3 次。

Answer 4

嗯，您对 CSS 的看法是完全正确的。试试这个，也许这行得通。我不确定。

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

添加 CSS：

#searchButton:
{
    background:url('filepath') no-repeat  no-repeat;
    width: 20px;
    height: 20px;
    border: 0px;
}

Answer 5

使用 FontAwesome 图标库并将 放在搜索按钮中。

* {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>