搜索栏中的Fontawesome

Posted 2023-03-15

【中文标题】搜索栏中的Fontawesome

【英文标题】：Fontawesome in search bar

【发布时间】：2018-04-03 15:34:11

【问题描述】：

我试图在我的搜索栏中使用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>

【问题讨论】：

***.com/questions/917610/…

Put icon inside input element in a form的可能重复

请提供实时网址

***.com/questions/19285640/…

@flowerflower 我已经更新了我的答案，请看一下。

【参考方案1】：

您可以尝试使用div（例如.search-bar）容器，我们可以在其中使用带有CSS定位的搜索图标并搜索输入并将其包装起来，将其视为占位符，喜欢：

<div class="search-bar">
  <i class="icon fa fa-search"></i>
  <input class="input-text" type="text" name="eingabe" placeholder="Suche">
</div>

您还需要一点 jQuery（仅用于切换类），并使用 max-width 而不是 .input-text 的宽度，例如：

JS（jQuery - 用于切换“活动”类）

$('.search-bar .icon').on('click', function() 
  $(this).parent().toggleClass('active');
);

CSS（当活动类被切换时）

.search-bar.active .input-text 
  max-width: 80%;
  border: 1px solid #ccc;
  background: #eee;

看看下面更新的sn-p：

$('.search-bar .icon').on('click', function() 
  $(this).parent().toggleClass('active');
);

.search-bar 
  position: relative;


.search-bar.active .input-text 
  max-width: 80%;
  border: 1px solid #ccc;
  background: #eee;


.search-bar .icon 
  cursor: pointer;
  position: absolute;
  top: 47%;
  left: 0;
  transform: translateY(-50%);
  padding: 13px 15px 13px 11px;


.search-bar .input-text 
  max-width: 0;
  border: 0;
  border-color: #ccc;
  height: 20px;
  padding: 8px 6px 8px 35px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;

<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-bar">
  <i class="icon fa fa-search"></i>
  <input class="input-text" type="text" name="eingabe" placeholder="Suche">
</div>

希望这会有所帮助！

【讨论】：

我喜欢你的第一种方法。他们是一种通过单击图标来激活我的转换的方法吗？ （我在您的代码的帮助下编辑了上面的问题。）

@flowerflower 我已经更新了我的解决方案。希望这是您需要实现的目标。如果这有帮助，请告诉我！

我希望有一个没有 javascript 的解决方案，但您的代码符合我的描述。如果没有 javascript，可以单击 div 外的任何位置以关闭输入字段。使用这个 javascript，我必须点击两次：第一次打开，第二次设置焦点以在输入字段中写入文本。

你也可以用javascript点击图标后将焦点设置在输入字段上。

【参考方案2】：

你需要去http://fontawesome.io/cheatsheet/ 那里你可以找到图标的Unicode。例如搜索图标是

【参考方案3】：

HTML

您需要做的是在input 周围创建一个父div 并使用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，当模糊时它将恢复正常。

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

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;

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

【参考方案4】：

如果您的要求是关于input 文本框内的可点击font-awesome 图标，请查看下面的sn-p 以获得简单的。

$('#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>

【参考方案5】：

只需转到此链接 http://fontawesome.io/cheatsheet/ 并找到此代码 