Fontawesome in search bar

Question

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>

Answer 1

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!

Answer 2

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 