2

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

代码如下

<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更新了很棒的字体

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

4

5 回答 5

4

您可以使用来自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>
于 2015-12-31T07:32:55.037 回答
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
}
于 2013-11-13T04:30:43.263 回答
1

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:

background: url("") no-repeat fixed center;

also check the path you specify in the url. if your images are in a separate folder you may have to add a "../" .

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.

于 2015-08-17T05:48:26.870 回答
0

好吧，你对 CSS 是完全正确的。试试这个，也许这行得通。我不确定。

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

添加CSS：

#searchButton:
{
    background:url('filepath') no-repeat  no-repeat;
    width: 20px;
    height: 20px;
    border: 0px;
}
于 2013-11-13T04:30:06.143 回答
0

使用 FontAwesome 图标库并将 <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>

于 2019-10-30T05:34:57.313 回答