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

浏览器提到的背景速记属性可能会被浏览器忽略为＆＃34; no-repeat＆＃34;正在写两次。试着这样写：

background：url（＆＃34;＆＃34;）no-repeat fixed center;

还要检查您在网址中指定的路径。如果您的图像位于单独的文件夹中，则可能需要添加＆＃34; ../" 。

P.S。尽管您的案例可能不需要，但最好提及背景位置等属性（上面的中心）。有时候浏览器会忽略整个属性。我不确定为什么会发生这种情况我不确定这实际上是一个问题还是我的代码中只是其他一些错误。总是不会发生，但我已经面临这个问题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 Icon库并将放入搜索按钮。

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

带搜索图标的HTML按钮？

5 个答案: