How do I add a Font Awesome icon to input field

Question

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     lt div id  search-bar  gt          lt form method  get  action  search php  autocomplete  off  name  form search  gt           lt input type  hidden  name  type  value  videos    gt               lt 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    gt               lt input type  image  src  http   viddir com themes default images search jpg  height  30  width  30  border  0  style  float right    gt           lt div id  searchBoxSuggestions  gt  lt  div gt           lt  form gt           lt  div gt

User · Answer

to work this with unicode or fontawesome, you should add a span with class like below, because input tag 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;   

}

User · Answer

Similar to the top answer  I used the unicode character in the value  section of the HTML and called FontAwesome as the font family on that input element  The only thing I ll add that the top answer doesn t cover is that because my value element also had text inside it after the icon  changing the font family to FontAwesome made the regular text look bad  The solution was simply to change the CSS to include fallback fonts    lt input type  text  id  datepicker  placeholder  Change Date  value    Sat Oct 19  readonly  readonly  class  hasDatepicker  gt   font-family  FontAwesome  Roboto  sans-serif    This way  FontAwesome will grab the icon  but all non-icon text will have the desired font applied

User · Answer

Change your input to a button element and you can use the Font Awesome classes on it   The alignment of the glyph isn t great in the demo  but you get the idea   http   tinker io 802b6 1   lt div id  search-bar  gt     lt form method  get  action  search php  autocomplete  off  name  form search  gt       lt input type  hidden  name  type  value  videos    gt           lt 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    gt  lt  --         -- gt  lt button class  icon-search  gt Search lt  button gt       lt div id  searchBoxSuggestions  gt  lt  div gt       lt  form gt   lt  div gt    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 here is that the form is still fully functional without having to add event handlers for elements that aren t buttons but look like one

User · Answer

For those  who are wondering how to get FontAwesome icons to drupal input  you have to decode entities first like so    form  submit     array    type    gt   submit     value    gt  decode entities   amp  xf014        code for FontAwesome trash icon    etc

User · Answer

Here is a solution that works with simple CSS and standard font awesome syntax  no need for unicode values  etc    Create an  lt input gt  tag followed by a standard  lt i gt  tag with the icon you need  Use relative positioning together with a higher layer order  z-index  and move the icon over and on top of the input field   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    x000D   x000D      filtersubmit   click function     x000D    alert  Searching for         filter   val     x000D      x000D   filtersubmit   x000D    position  relative  x000D    z-index  1  x000D    left  -25px  x000D    top  1px  x000D    color   7B7B7B  x000D    cursor  pointer  x000D    width  0  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 2 0 css font-awesome min css  rel  stylesheet    gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input id  filter  type  text  placeholder  Search    gt  x000D   lt i id  filtersubmit  class  fa fa-search  gt  lt  i gt  x000D   x000D   x000D

User · Answer

simple way for new font awesome      lt div class  input-group  gt                       lt input type  text  class  form-control  placeholder  Search  name  txtSearch    gt                       lt div class  input-group-btn  gt                           lt button class  btn btn-default  type  submit  gt  lt i class  fas fa-search  gt  lt  i gt  lt  button gt                       lt  div gt                   lt  div gt

User · Answer

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   lt i class  quot icon-search icon-2x quot  gt  lt  i gt   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  lt button type  quot submit quot  gt  object instead of i  or with javascript  The button sollution would be something like this   lt button type  quot submit quot  class  quot icon-search icon-large quot  gt  lt  button gt   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  quot submit quot         font-family  FontAwesome     HTML   lt input type  quot submit quot  class  quot search quot  value  quot  amp  xf002  quot    gt   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  amp  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  quot submit quot         font-family   quot Font Awesome 5 Free quot      for the open access version     font-size  1 3333333333333333em      font-weight  900     See  WillFastie  s comment with link to updated fiddle bellow  Thanks

User · Answer

fa-file-o       position  absolute      left  50px      top  15px      color   ffffff     lt div gt    lt span class  fa fa-file-o  gt  lt  span gt    lt input type  button  name    value  IMPORT FILE   gt   lt  div gt

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

Examples related to html

Examples related to css

Examples related to font-awesome