2

I'm trying to use the search icon from fontawesome instead of a background-image in my search bar that uses a transition to expand the input area. Clicking on this icon the area should be opend.

I tried with

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

but then the symbol is beside the input and I can't click on it to use my transition to erase the width of my input.

@Saurav nearly solved my question, but I can't click on the icon.

.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>
flowerflower
  • 327
  • 1
  • 3
  • 10

5 Answers5

6

You can try using a div (such as .search-bar) container inside which we can use a search icon with CSS positioning and search input and wrap it, to look it as a placeholder, Like:

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

You will also need a little jQuery (just for toggling the classes), and using max-width instead of width for .input-text like:

JS (jQuery - for toggling 'active' class)

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

CSS (when active class is toggled)

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

Have a look at the updated snippet below:

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

Hope this helps!

Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
  • I like your first approach. Is their a way to activate my transition by clicking on the icon? (I edited my question above with the help of your code.) – flowerflower Oct 23 '17 at 12:49
  • @flowerflower I've updated my solution. Hope this is what you need to achieve. Please let me know if this helps! – Saurav Rastogi Oct 23 '17 at 15:45
  • I hoped for a solution without javascript but your code does what I described. Without javascript a can click anywhere outside the div for closing the input field. And with this javascript I have to click two times: first time to open and second time to set focus to write text in the input field. – flowerflower Oct 24 '17 at 20:46
  • you can set the focus on the input field after clicking the icon with javascript too. – FllnAngl Apr 13 '18 at 07:25
4

you need go to http://fontawesome.io/cheatsheet/ there you will be able to find Unicode for the icons. For example for search icon is &#xf002;

caramba
  • 21,963
  • 19
  • 86
  • 127
jedicode
  • 145
  • 1
  • 11
1

HTML

What you need to do is create a parent div around the input and use div:before to add the icon using content.

CSS

To get the icon that you want, you can refer to below url:

http://fontawesome.io/cheatsheet/

Take the first icon for example [&#xf26e;] to get this icon to show up in css, you will only require the last 4 characters with a backward slash like so \f26e

Javascript (JQuery)

To make the icon disappear when you focus the input you need some Javascript:

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

This will add/remove the .active class to your element and when it is active the css will overwrite and set the icon to diplay:none when blur it will return to normal.

$( "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>
Vincent1989
  • 1,593
  • 2
  • 13
  • 25
0

If your requirement is about clickable font-awesome icon inside input textbox, then check below snippet for simple one.

$('#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>
RaJesh RiJo
  • 4,302
  • 4
  • 25
  • 46
0

Just go to this link http://fontawesome.io/cheatsheet/ And find this code &#xf002

Harden Rahul
  • 930
  • 8
  • 15