How to add a Font Awesome icon to an input field?

Question

How to use the search icon included in Font Awesome for input? I have a search function on my site (based on PHPmotion) that I want to use for search.

Here is the code:

<div id="search-bar"> <form method="get" action="search.php" autocomplete="off" name="form_search"> <input type="hidden" name="type" value="videos" /> <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this, 'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold; font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color: #ffffff" /> <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/> <div id="searchBoxSuggestions"></div> </form> </div> 

Answer 1

You can use a different tag instead of input and apply FontAwesome in the usual way.

instead of input with type image you can use this:

 <i class="icon-search icon-2x"></i> 

quick CSS :

 .icon-search { color:white; background-color:black; } 

Here is a quick fiddle: DEMO

You can style it a bit and add an event function to the i object, which you can do using the <button type="submit"> object instead of i or with javascript.

The button solution will look something like this:

 <button type="submit" class="icon-search icon-large"></button> 

And CSS :

 .icon-search { height:32px; width:32px; border: none; cursor: pointer; color:white; background-color:black; position:relative; } 

here my violin is updated with a button instead of i: DEMO

---

Update: using FontAwesome in any tag

The problem with FontAwsome is that its style sheet uses :before pseudo-elements to add icons to the element - and the pseudo-elements do not work / are not allowed on input elements. This is why using FontAwesome in the normal way will not work with input .

But there is a solution - you can use FontAwesome as a regular font like this:

CSS

 input[type="submit"] { font-family: FontAwesome; } 

HTML:

 <input type="submit" class="search" value="&#xf002;" /> 

Glyphs can be passed as values ​​of the value attribute. The ascii codes for individual letters / icons can be found in the FontAwesome css file, you just need to change them to an HTML ascii number, for example \f002 , to  , and it should work.

Link to FontAwesome ascii code ( cheatsheet ): fortawesome.imtqy.com/Font-Awesome/cheatsheet

The size of the icons can be easily adjusted using font-size .

See the above example using the input element in jsfidde:

Demo

Answer 2

Here is a solution that works with simple CSS and standard font, awesome syntax, without the need for unicode values, etc.

• Create an <input> tag followed by a standard <i> with the desired icon.

• Use relative positioning along with a higher level order (z-index) and move the icon on top and above the input field.

• (Optional) You can make the icon active, perhaps submit data via standard JS.

Below are three code snippets for HTML / CSS / JS.

Or the same in JSFiddle here: Example: http://jsfiddle.net/ethanpil/ws1g27y3/

 $('#filtersubmit').click(function() { alert('Searching for ' + $('#filter').val()); }); 

 #filtersubmit { position: relative; z-index: 1; left: -25px; top: 1px; color: #7B7B7B; cursor: pointer; width: 0; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="filter" type="text" placeholder="Search" /> <i id="filtersubmit" class="fa fa-search"></i> 

Answer 3

For those who are wondering how to get the FontAwesome badges for drupal login, you should first decode_entities as follows:

 $form['submit'] = array( '#type' => 'submit', '#value' => decode_entities(''), // code for FontAwesome trash icon // etc. ); 

Answer 4

Change your input to a button element and you can use the awesome font classes. Glyph alignment is not very large in the demo, but you get the idea:

http://tinker.io/802b6/1

 <div id="search-bar"> <form method="get" action="search.php" autocomplete="off" name="form_search"> <input type="hidden" name="type" value="videos" /> <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this, 'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold; font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color: #ffffff" /><!-- --><button class="icon-search">Search</button> <div id="searchBoxSuggestions"></div> </form> </div> #search-bar .icon-search { width: 30px; height: 30px; background: black; color: white; border: none; overflow: hidden; vertical-align: middle; padding: 0; } #search-bar .icon-search:before { display: inline-block; width: 30px; height: 30px; } 

The advantage is that the form is still fully functional without adding event handlers for elements that are not buttons but look like one.

Answer 5

 .fa-file-o { position: absolute; left: 50px; top: 15px; color: #ffffff } <div> <span class="fa fa-file-o"></span> <input type="button" name="" value="IMPORT FILE"/> </div> 

Answer 6

To work with unicode or fontawesome, you must add a span with the class as shown below, because the input tag does not support pseudo-classes like: after. this is not a direct solution

in html:

  <span class="button1 search"></span> <input name="username"> 

in css:

 .button1 { background-color: #B9D5AD; border-radius: 0.2em 0 0 0.2em; box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); pointer-events: none; margin:1px 12px; border-radius: 0.2em; color: #333333; cursor: pointer; position: absolute; padding: 3px; text-decoration: none; }