Question

我正在尝试在我的搜索栏中使用search icon from fontawesome代替background-image，该搜索栏使用转换来扩展输入区域。点击此图标即可打开该区域。

我试过

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" name="eingabe" placeholder="Suche">
<i class="fa fa-search" aria-hidden="true"></i>
</input>

但是符号位于输入旁边，我无法点击它以使用我的过渡来擦除输入的宽度。

@Saurav几乎解决了我的问题，但我无法点击图标。

.search-bar {
  position: relative;
}

.search-bar .icon {
  position: absolute;
  top: 47%;
  left: 10px;
  transform: translateY(-50%);
}

.search-bar .input-text {
  width: 0px;
  border: 0px;
  background-color: #fff;
  height: 20px;
  padding: 8px 8px 8px 35px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
.search-bar .input-text:focus {
  width: 80%;
  background-color: #ccc;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-bar">
  <i class="icon fa fa-search"></i>
  <input class="input-text" type="text" name="eingabe" placeholder="Suche">
</div>

Answer 1

你需要转到http://fontawesome.io/cheatsheet/，你就可以找到图标的Unicode。例如，搜索图标为

Answer 2

<强> HTML

您需要做的是在div周围创建一个父input，然后使用div:before使用content添加图标。

<强> CSS

要获取所需的图标，可以参考以下网址：

http://fontawesome.io/cheatsheet/

使用示例[]的第一个图标来显示此图标以显示在css中，您只需要使用反斜杠的最后4个字符，如\f26e

Javascript（JQuery）

要在对焦输入时使图标消失，您需要一些Javascript：

$( "input" )
  .focus(function() {
    $( this ).parent().addClass('active');
  })
  .blur(function() {
    $( this ).parent().removeClass('active');
  });

这将为您的元素添加/删除.active类，当它处于活动状态时，css将覆盖并将图标设置为diplay：none，当模糊时它将恢复正常。

＆＃13;

$( "input" )
  .focus(function() {
    $( this ).parent().addClass('active');
  })
  .blur(function() {
    $( this ).parent().removeClass('active');
  });

＆＃13;

div{
  position:relative;
  
}
div:before{
    content: "\f2b9";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    position: absolute;
    height: 16px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 10px;
    color:grey;
}

input{
    padding: .5rem;
    padding-left: 2rem;
}

.active{
  
}

.active:before{
  display:none;
}

.active input{
  padding: .5rem;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
<input type="text" name="eingabe" placeholder="placeholder text">
</div>

＆＃13;

Answer 3

如果您的要求是关于font-awesome文本框内的可点击input图标，请查看以下代码段中的简单摘要。

$('#mybutton').click(function() {
  console.log('search icon clicked!');
});

.search-widget {
  border: 1px solid #858585;
  display: inline-block;
  height: 35px;
  float: left;
}

.search-widget input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: transparent;
  border: 0;
  height: 35px;
}

.search-widget button {
  background-color: transparent;
  color: #1293D4;
  border: 0;
  height: 35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="search-widget">
  <input name="name" type="text" placeholder="search">
  <button id="mybutton"><i class="fa fa-search"></i></button>
</div>

Answer 4

转到此链接的 http://fontawesome.io/cheatsheet/ 并找到此代码＆amp;＃xf002

Fontawesome在搜索栏中

4 个答案: