Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I add a Font Awesome icon to input field?

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

Here's 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> 
like image 941
user2275855 Avatar asked Apr 13 '13 13:04

user2275855


People also ask

How do you add an icon to the input field?

In HTML, icons are added with the <i> tag. For it to be added inside the input elements, it must be added between the closing and opening tags of the elements in which you want the icon to be displayed.

How do I add Font Awesome to input placeholder?

Use placeholder="&#xF002;" in your input. You can find unicode in FontAwesome page http://fontawesome.io/icons/ . But you have to make sure add style="font-family: FontAwesome;" in your input.

How do I integrate Font Awesome icons in CSS?

To use font awesome icons as CSS content code follow the below steps. Add a unique CSS class name to the icon element you want to use. Set the font-weight css property as 900 (For Solid), 400 (Regular or Brands), 300 (Light for pro icons). Set the content css property to the unicode value font awesome icon.


2 Answers

You can use another tag instead of input and apply FontAwesome the normal way.

instead of your 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 little better and add event functionality, to the i object, which you can do by using a <button type="submit"> object instead of i, or with javascript.

The button sollution would be something like this:

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

And the CSS:

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

here is my fiddle updated with the button instead of i: DEMO


Update: Using FontAwesome on any tag

The problem with FontAwsome is that its stylesheet uses :before pseudo-elements to add the icons to an element - and pseudo elements don't work/are not allowed on input elements. This is why using FontAwesome the normal way will not work with input.

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

CSS:

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

HTML:

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

The glyphs can be passed as values of the value attribute. The ascii codes for the individual letters/icons can be found in the FontAwesome css file, you just need to change them into a HTML ascii number like \f002 to &#xf002; and it should work.

Link to the FontAwesome ascii code (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet

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

See the above example using an input element in a jsfidde:

DEMO


Update: FontAwesome 5

With FontAwesome version 5 the CSS required for this solution has changed - the font family name has changed and the font weight must be specified:

input[type="submit"] {     font-family: "Font Awesome 5 Free"; // for the open access version     font-size: 1.3333333333333333em;     font-weight: 900; } 

See @WillFastie 's comment with link to updated fiddle bellow. Thanks!

like image 85
Martin Turjak Avatar answered Sep 17 '22 13:09

Martin Turjak


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

  1. Create an <input> tag followed by a standard <i> tag with the icon you need.

  2. Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.

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

See the three code snippets below for the 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>
like image 41
ethanpil Avatar answered Sep 21 '22 13:09

ethanpil