Font Awesome icon inside text input element

Question

I am trying to insert a user icon inside username input field    I ve tried one of the solution from the similar question  knowing that background-image property won t work since Font Awesome is a font   The following is my approach and I can t get the icon display    wrapper input type  text         position  relative      wrapper input type  text   before       font-family   FontAwesome       position  absolute      top  0px      left  -5px      content    f007       I have font face declared in the default font awesome css so I wasn t sure if adding font-family above was the right approach     font-face        font-family   FontAwesome        src  url     Font fontawesome-webfont eot v 3 2 1         src  url     Font fontawesome-webfont eot  iefix amp v 3 2 1   format  embedded-opentype    url     Font fontawesome-webfont woff v 3 2 1   format  woff    url     Font fontawesome-webfont ttf v 3 2 1   format  truetype    url     Font fontawesome-webfont svg fontawesomeregular v 3 2 1   format  svg

User · Answer

-webkit-search-cancel-button           height  10px          width  10px          display  inline-block            background-color   0e1d3033            content    amp  f00d            font-family  FontAwesome          font-weight  900          -webkit-appearance  searchfield-cancel-button  important            input searchInput           -webkit-appearance  searchfield  important          lt input data-type  search  type  search  id  searchInput  class  form-control  gt

User · Answer

Having read various versions of this question and searching around I ve come up with quite a clean  js-free  solution  It s similar to  allcaps solution but avoids the issue of the input font being changed away from the main document font   Use the   input-placeholder attribute to specifically style the placeholder text  This allows you to use your icon font as the placeholder font and your body  or other font  as the actual input text  Currently you need to specify vendor-specific selectors   This works well as long as you don t need a combination of icon and text in your input element  If you do then you ll need to put up with the placeholder text being default browser font  plain serif on mine  for words   E g  HTML   lt p class  wrapper  gt       lt input class  icon  type  text  placeholder   amp  61442     gt   lt  p gt    CSS   wrapper       font-family  arial   sans-serif    input icon  -webkit-input-placeholder       font-family  FontAwesome       Fiddle with browser prefixed selectors  http   jsfiddle net gA4rx 78   Note that you need to define each browser-specific selector as a seperate rule  If you combine them the browser will ignore it

User · Answer

My Solution to add a font-awesome icon inside the input element  Here is a simple code to add icon inside the input element  Just copy the code below and put where you want to add  or if you want to change the icon then just put your icon code in  lt i gt   tag    x000D   x000D   lt style gt  x000D  body  font-family  Arial  Helvetica  sans-serif   x000D     box-sizing  border-box   x000D   soft-codeon   x000D    display  -ms-flexbox     IE10    x000D    display  flex  x000D    width  50   x000D    margin-bottom  15px  x000D    x000D   x000D   icon   x000D    padding  10px  x000D    background  linear-gradient to right   ec008c   fc6767    x000D    color  white  x000D    min-width  20px  x000D    text-align  center  x000D    x000D   soft-field   x000D    width  100   x000D    padding  10px  x000D    outline  none  x000D    border 2px solid  fc6767  x000D    x000D   soft-field focus   x000D    border  2px solid  ec008c  x000D    x000D   lt  style gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css  gt  x000D     lt div class  soft-codeon  gt  x000D       lt i class  fa fa-user icon  gt  lt  i gt  x000D       lt input class  soft-field  type  text  placeholder  Username  name  usrnm  gt  x000D     lt  div gt  x000D     lt div class  soft-codeon  gt  x000D       lt i class  fa fa-envelope icon  gt  lt  i gt  x000D       lt input class  soft-field  type  text  placeholder  Email  name  email  gt  x000D     lt  div gt  x000D   x000D   x000D

User · Answer

Output     HTML    lt input name  txtName  id  txtName  gt    lt span class  fa fa-info-circle errspan  gt  lt  span gt    CSS    lt style type  text css  gt       errspan           float  right          margin-right  6px          margin-top  -20px          position  relative          z-index  2          color  red         lt  style gt     Or   Output     HTML    lt div class  input-wrapper  gt        lt input type  text    gt    lt  div gt    CSS    lt style type  text css  gt       input-wrapper           display inline-block          position  relative            input-wrapper after           font-family   FontAwesome           content    f274           position  absolute          right  6px         lt  style gt

User · Answer

Easy way  but you need bootstrap   lt div class  quot input-group mb-3 quot  gt       lt div class  quot input-group-prepend quot  gt         lt span class  quot input-group-text quot  gt  lt i class  quot fa fa-envelope quot  gt  lt  i gt  lt  span gt   lt  -- icon envelope  quot class  quot fa fa-envelope quot  quot -- gt       lt  div gt       lt input type  quot email quot  id  quot senha nova quot  placeholder  quot Email quot  gt     lt  div gt  lt  -- input-group -- gt

User · Answer

Sometime the icon won t show up due to the Font Awesome version  For version 5  the css should be  dropdown-wrapper  after        content   quot  f078 quot        font-family   Font Awesome 5 Free        font-weight  900       color   000       position  absolute       right  6px       top  10px       z-index  1       width  10        height  100        pointer-events  none

User · Answer

No need to code a lot    just follow the following steps    lt input id  input search  type  text  class  fa  placeholder   amp  xf002 Search  gt    you can find the links to the Unicode fontawesome  here     FontAwesome Unicode for icons

User · Answer

You could use a wrapper  Inside the wrapper  add the font awesome element i  and the input element     lt div class  wrapper  gt       lt i class  fa fa-icon  gt  lt  i gt       lt input type  button  gt   lt  div gt    then set the wrapper s position to relative     wrapper   position  relative      and then set the i element s position to absolute  and set the correct place for it    i fa-icon   position  absolute  top  10px  left  50px       It s a hack  I know  but it gets the job done

User · Answer

x000D   x000D   input-icon  x000D    position  absolute  x000D    left  3px  x000D    top  calc 50  - 0 5em      Keep icon in center of input  regardless of the input height    x000D    x000D  input  x000D    padding-left  17px  x000D    x000D   input-wrapper  x000D    position  relative  x000D    x000D   lt link href  https   netdna bootstrapcdn com font-awesome 4 0 3 css font-awesome css  rel  stylesheet   gt  x000D   lt div class  input-wrapper  gt  x000D     lt input id  stuff  gt  x000D     lt label for  stuff  class  fa fa-user input-icon  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

My solution was to have a relative container around the input for holding the icon  That outer container has a   after with the desired icon  positioned absolute within the container   HTML    lt div class  button  outer  gt       lt input type  submit  class  button  value  Send   gt   lt  div gt    SASS code    button    display  inline-block   width  auto   height  60px   line-height  60px      button  outer       position  relative      display  inline-block      width  auto        amp   after          position  absolute         right  0         top  0         height  60px         line-height  60px         width  60px         font-family   FontAwesome   sans-serif         content    f054          color   fff         font-size  27px         font-weight  700

User · Answer

For me  an easy way to have an icon  within  a text input without having to try to use pseudo-elements with font awesome unicode etc  is to have the text input and the icon within a wrapper element which we will position relative  and then position both the search input and the font awesome icon absolute    The same way we do with background images and text  we would do here  I feel this is good for beginners as well  as css positioning is something a beginner should learn in the beginning of their coding journey  so the code is easy to understand and reuse         lt div class  searchbar-wrapper  gt         lt i class  fa fa-search searchbar-i  aria-hidden  true  gt  lt  i gt         lt input class  searchbar-input  type  search  placeholder  Search     gt       lt  div gt        searchbar-wrapper        position relative              searchbar-i        position absolute        top  50         transform  translateY -50          padding  0  5rem              searchbar-input        padding-left  2rem

User · Answer

I did achieve this like so   x000D   x000D    form i   x000D      left  -25px  x000D      top  23px  x000D      border  none  x000D      position  relative  x000D      padding  0  x000D      margin  0  x000D      float  left  x000D      color   29a038  x000D      x000D   lt form gt  x000D   x000D     lt i class  fa fa-link  gt  lt  i gt  x000D   x000D     lt div class  form-group string optional profile website  gt  x000D       lt input class  string optional form-control  placeholder  http   your-website com  type  text  name  profile website   id  profile website  gt  x000D     lt  div gt  x000D   x000D     lt i class  fa fa-facebook  gt  lt  i gt  x000D     lt div class  form-group url optional profile facebook url  gt  x000D       lt input class  string url optional form-control  placeholder  http   facebook com your-account  type  url  name  profile facebook url   id  profile facebook url  gt  x000D     lt  div gt  x000D   x000D     lt i class  fa fa-twitter  gt  lt  i gt  x000D     lt div class  form-group url optional profile twitter url  gt  x000D       lt input class  string url optional form-control  placeholder  http   twitter com your-account  type  url  name  profile twitter url   id  profile twitter url  gt  x000D     lt  div gt  x000D   x000D     lt i class  fa fa-instagram  gt  lt  i gt  x000D     lt div class  form-group url optional profile instagram url  gt  x000D       lt input class  string url optional form-control  placeholder  http   instagram com your-account  type  url  name  profile instagram url   id  profile instagram url  gt  x000D     lt  div gt  x000D   x000D     lt input type  submit  name  commit  value  Add profile  gt  x000D   lt  form gt  x000D   x000D   x000D    The result looks like this     Side note  Please note that I am using Ruby on Rails so my resulting code looks a bit blown up  The view code in slim is actually very concise   i fa fa-link   f input  website  label  false  i fa fa-facebook   f input  facebook url  label  false  i fa fa-twitter   f input  twitter url  label  false  i fa fa-instagram   f input  instagram url  label  false

User · Answer

You re right   before and  after pseudo content is not intended to work on replaced content like img and input elements  Adding a wrapping element and declare a font-family is one of the possibilities  as is using a background image  Or maybe a html5 placeholder text fits your needs    lt input name  username  placeholder   amp  61447   gt    Browsers that don   t support the placeholder attribute will simply ignore it   UPDATE  The before content selector selects the input  input type  text   before  You should select the wrapper   wrapper before  See http   jsfiddle net allcaps gA4rx     I also added the placeholder suggestion where the wrapper is redundant      wrapper input type  text         position  relative      input   font-family   FontAwesome        This is for the placeholder      wrapper before       font-family   FontAwesome       color red      position  relative      left  -5px      content    f007       lt p class  wrapper  gt  lt input placeholder   amp  61447  Username  gt  lt  p gt    Fallback  Font Awesome uses the Unicode Private Use Area  PUA  to store icons  Other characters are not present and fall back to the browser default  That should be the same as any other input  If you define a font on input elements  then supply the same font as fallback for situations where us use an icon  Like this    input   font-family   FontAwesome   YourFont

User · Answer

lt  doctype html gt   lt html gt     lt head gt         Heading         lt meta charset  utf-8  gt         lt title gt          Untitled Document        lt  title gt         lt  head gt         lt style gt          li             display  block            width  auto                    ul li gt  ul li             float  left                    ul li gt  ul             display  none            position  absolute                    li hover  gt  ul             display  block            margin-left  148px            display  inline            margin-top  -52px                    a             background   f2f2ea            display  block              padding 10px 5px                         width  186px            height  50px            border  solid 2px  c2c2c2            border-bottom  none            text-decoration  none                    li hover  gt a             background   ffffff                    ul li gt li hover             margin  12px auto 0px auto            padding-top  10px            width  0            height  0            border-top  8px solid  c2c2c2                     bottom             border-bottom  solid 2px  c2c2c2                     sub m             border-bottom  solid 2px  c2c2c2                     sub m2             border-left  none            border-right  none            border-bottom  solid 2px  c2c2c2                    li selected             background   6D0070                     menu content               float left                                   ca-main             padding-top  18px            margin  0            color   34495e            font-size  18px                     ca-sub             padding-top  18px            margin  0px 20px            color   34495e            font-size  18px                     submenu a             width  auto                    h2             text-align  center                   lt  style gt         lt body gt           lt ul gt             lt li gt               lt a href     gt                 lt div id  menu content  gt                   lt h2 class  ca-main  gt                    Item 1                  lt  h2 gt                 lt  div gt               lt  a gt               lt ul class  submenu   gt                 lt li gt                   lt a href     class  sub m  gt                     lt div id  menu content  gt                       lt h2 class  ca-sub  gt                        Item 1 1                      lt  h2 gt                     lt  div gt                   lt  a gt                 lt  li gt                 lt li gt                    lt a href     class  sub m2  gt                     lt div id  menu content  gt                       lt h2 class  ca-sub  gt                        Item 1 2                      lt  h2 gt                     lt  div gt                   lt  a gt                 lt  li gt                 lt li  gt                    lt a href     class  sub m  gt                     lt div id  menu content  gt                       lt h2 class  ca-sub  gt                        Item 1 3                      lt  h2 gt                     lt  div gt                   lt  a gt                  lt  li gt               lt  ul gt             lt  li gt             lt li gt                lt a href     gt                 lt div id  menu content  gt                   lt h2 class  ca-main  gt                    Item 2                  lt  h2 gt                 lt  div gt               lt  a gt             lt  li gt             lt li gt                lt a href     gt                 lt div id  menu content  gt                   lt h2 class  ca-main  gt                    Item 3                  lt  h2 gt                 lt  div gt               lt  a gt              lt  li gt             lt li gt                lt a href      class  bottom  gt                 lt div id  menu content  gt                   lt h2 class  ca-main  gt                    Item 4                  lt  h2 gt                 lt  div gt               lt  a gt              lt  li gt           lt  ul gt         lt  body gt   lt  html gt

User · Answer

Make clickable icon to focus inside the text input element   CSS   myClass       font-size 20px      position absolute  top 10px  left 10px      HTML   lt div gt       lt label style  position relative   gt            lt i class  myClass fa fa-address-book-o  gt  lt  i gt            lt input class  w3-input  type  text  style  padding-left 40px   gt       lt  label gt   lt  div gt    Just add whichever icon you like inside the  lt i gt  tag  from Font Awesome library and enjoy the results

User · Answer

The below simple solution worked for me   lt input type  quot text quot  class  quot fa quot  placeholder  quot  amp  xf002  Search quot  gt   Use this filter for implement search  https   www npmjs com package ng2-search-filter

User · Answer

To work this with unicode or fontawesome  you should add a span with class like below   In HTML    lt span class  button1 search  gt  lt  span gt   lt input name  username  gt    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

I tried the below stuff and it really works well HTML   x000D   x000D  input hai   x000D      width  450px  x000D      padding-left  25px  x000D      margin  15px  x000D      height  25px  x000D      background-image  url  https   cdn4 iconfinder com data icons casual-events-and-opinions 256 User-512 png     x000D      background-size  20px 20px  x000D      background-repeat  no-repeat  x000D      background-position  left  x000D      background-color  grey  x000D    x000D   lt div  gt  x000D   x000D       lt input class  hai  placeholder  Search term  gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This answer will work for you if you need the following conditions met  none of the current answers met these conditions     The icon is inside the text box The icon shouldn t disappear when text is entered into the input  and text entered goes to the right of the icon Clicking the icon should bring the underlying input into focus   I believe that 3 is the minimal number of HTML elements to satisfy these conditions    x000D   x000D   input-icon  x000D    position  absolute  x000D    left  3px  x000D    top  calc 50  - 0 5em      Keep icon in center of input  regardless of the input height    x000D    x000D  input  x000D    padding-left  17px  x000D    x000D   input-wrapper  x000D    position  relative  x000D    x000D   lt link href  https   netdna bootstrapcdn com font-awesome 4 0 3 css font-awesome css  rel  stylesheet   gt  x000D   lt div class  input-wrapper  gt  x000D     lt input id  stuff  gt  x000D     lt label for  stuff  class  fa fa-user input-icon  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Building on allcaps suggestion  Here is the font-awesome background method with the least amount of HTML    lt div class  wrapper  gt  lt input gt  lt  div gt    wrapper       position  relative      input   padding-left  20px      wrapper before       font-family   FontAwesome       position  absolute      top  2px      left  3px      content    f007

User · Answer

I found the easiest way using bootstrap 4    lt div class  input-group mb-3  gt       lt div class  input-group-prepend  gt       lt span class  input-group-text  gt  lt i class  fa fa-user  gt  lt  i gt  lt  span gt  lt  div gt       lt input type  text   gt   lt  div gt

User · Answer

lt HTML gt   lt head gt   lt style gt   inp1  color  2E64FE  width 350px  height 35px  border solid  font-size 20px  text-align left     lt  style gt   lt  head gt    lt body gt    lt div class  inp1  gt             lt a href     class    gt  lt i class  fa fa-search  gt  lt  i gt  lt  a gt   lt  div gt

User · Answer

purely CSS  input type search        min-width  320px      height  24px      border  1px solid  E6E6E6      border-radius  8px      margin-top  6px      background-image  url   img search png        background-size  16px      background-position  280px      background-repeat  no-repeat

[html] Font Awesome icon inside text input element

Examples related to html

Examples related to css

Examples related to fonts

Examples related to font-awesome