164

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&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');
 }
Community
  • 1
  • 1
Seong Lee
  • 10,314
  • 25
  • 68
  • 106

25 Answers25

152

Output:

enter image description here

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(Or)

Output:

enter image description here

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>
Palanikumar
  • 6,940
  • 4
  • 40
  • 51
114

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:

<input name="username" placeholder="&#61447;">

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";
    }
    
    <p class="wrapper"><input placeholder="&#61447; Username"></p>

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; }
Engineer S. Saad
  • 378
  • 4
  • 19
allcaps
  • 10,945
  • 1
  • 33
  • 54
  • 4
    Using your placeholder method works. The trouble is that normal (non-icon) text does not match the font-face of the rest of the page and is displayed as browser default serif. Any way to get around this? – harryg Mar 18 '14 at 11:27
  • 7
    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 somewhere, then supply the same font as fallback for situations where us use an icon: `input { font-family: 'FontAwesome' YourFont; }`. Does this help? You can always ask a new question. – allcaps Mar 18 '14 at 12:29
  • 1
    @allcaps the recommendation to use a fallback font-family for the placeholder works WONDERS!! I didn't think to change the font through a fallback. Can you update your answer to include a fallback font for future users? Thanks! – ProfileTwist Jan 13 '15 at 12:42
  • 1
    where can i find list of code. i mean fa-user to  – Elyor Sep 16 '15 at 13:10
  • 1
    @Elyor: You don't need to use the html entity. If your project is UTF-8, you can just copy paste the Font awesome glyph. It will probably show up as a block in your code editor, but that is okay. You can also use one of the many online unicode-to-html-entities-convertors. – allcaps Sep 16 '15 at 17:58
  • 6 ways to add an icon to an input for Bootstrap 4, or 4 ways without BS4. See my fiddle here : http://jsfiddle.net/djibe89/tyh21Lxe/ – djibe Jun 08 '18 at 20:53
  • @djibe Similar example without bootstrap? – Ashfaque Rifaye Nov 28 '18 at 01:33
  • Bootstrap is just css. Use the browser inspector on any (bootstrap) example and only copy relevant styles. – allcaps Nov 28 '18 at 08:06
  • @AshfaqueRifaye As you can see in my fiddle, last examples use pure CSS or HTML + CSS techniques ( = Bootstrap free). – djibe Nov 28 '18 at 15:43
33

This answer will work for you if you need the following conditions met (none of the current answers met these conditions):

  1. The icon is inside the text box
  2. The icon shouldn't disappear when text is entered into the input, and text entered goes to the right of the icon
  3. 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:

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>
Skeets
  • 4,476
  • 2
  • 41
  • 67
  • 4
    Best answer for having the icon inside the input field, where the icon remains visible while the user types. – ObjectiveTC Sep 18 '17 at 23:14
  • top: calc(50% - 0.5em) assumes your label has 1em height – drichar Jun 01 '18 at 01:38
  • 1
    @drichar - I just tested, this still works with any label height. As long as you don't vertically align the label text within the label (which isn't the default) Since it aligns to the top by default, a taller label will still work correctly. I also tested with different font sizes on the label and the input. It seems to work in all scenarios. – Skeets Jun 01 '18 at 01:51
  • @SkeetsO'Reilly I stand corrected. I'm confusing em and rem. 0.5em is half of whatever the font size is. Great solution, I'm using it in a project (just using custom SVG, not FA, which has no font size, which led to my positioning issue, and misinformed comment) – drichar Jun 02 '18 at 03:58
26

You could use a wrapper. Inside the wrapper, add the font awesome element i and the input element. 

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

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.)

Amir Hassan Azimi
  • 9,180
  • 5
  • 32
  • 43
Mero
  • 309
  • 3
  • 4
  • 2
    Why do we need a .wrapper there? – Ashfaque Rifaye Nov 28 '18 at 01:12
  • As I understand it, absolute elements are placed relative to the nearest 'positioned' ancestor. Position: relative means the wrapper is 'positioned' (it could also have been absolute, fixed or sticky). If you don't do this, the icon will be absolutely positioned relative to some other element higher in the dom (or if no positioned elements are found, relative to the viewport). – Jaqen H'ghar Jun 20 '20 at 09:24
19

No need to code a lot... just follow the following steps:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

you can find the links to the Unicode(fontawesome) here...

FontAwesome Unicode for icons

Rashid Iqbal
  • 840
  • 10
  • 14
  • What if i am already using another font-family for placeholder? then it will not work. Is there any way to make text "Search" in " Search" use custom font and unicode still uses fontawesome font? – Sushmit Sagar Aug 16 '19 at 18:41
8

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

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

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.

harryg
  • 23,311
  • 45
  • 125
  • 198
  • While it's an elegant solution, it doesn't achieve the expected behavior. – Olivier Refalo May 19 '14 at 08:01
  • Indeed, it seems Webkit browsers are the only ones that accept `font-family` for this selector at this time. We can only hope for more widespread acceptance in the future. – harryg May 19 '14 at 08:41
6

I found the easiest way using bootstrap 4.

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span></div>
    <input type="text"/>
</div>
Henry O.
  • 61
  • 1
  • 1
6

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>
Ola Olushesi
  • 71
  • 1
  • 4
  • 1
    Hi please attach a little explanation to you solution. – Aditya Thakur May 09 '19 at 01:48
  • 2
    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 the conditions – Ola Olushesi May 09 '19 at 11:02
2

I did achieve this like so

  form i {
    left: -25px;
    top: 23px;
    border: none;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    color: #29a038;
  }
<form>

  <i class="fa fa-link"></i>

  <div class="form-group string optional profile_website">
    <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
  </div>

  <i class="fa fa-facebook"></i>
  <div class="form-group url optional profile_facebook_url">
    <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
  </div>

  <i class="fa fa-twitter"></i>
  <div class="form-group url optional profile_twitter_url">
    <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
  </div>

  <i class="fa fa-instagram"></i>
  <div class="form-group url optional profile_instagram_url">
    <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
  </div>

  <input type="submit" name="commit" value="Add profile">
</form>

The result looks like this:

result

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
Besi
  • 22,579
  • 24
  • 131
  • 223
2

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. 

    <div class="searchbar-wrapper">
      <i class="fa fa-search searchbar-i" aria-hidden="true"></i>
      <input class="searchbar-input" type="search" placeholder="Search...">
    </div>

    .searchbar-wrapper{
      position:relative;
    }

    .searchbar-i{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 .5rem;
    }

    .searchbar-input{
      padding-left: 2rem;
    }
Gerard
  • 2,200
  • 1
  • 9
  • 6
2

You can use Bootstrap 5.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container shadow min-vh-100 py-2">
    <div class="position-relative">
        <input type="text" class="form-control ">
        <a href=""><i class="position-absolute top-50 end-0 translate-middle-y pe-2">❌</i></a>
    </div>
</div>
Aetos2501
  • 165
  • 1
  • 9
1

Building on allcaps suggestion. Here is the font-awesome background method with the least amount of HTML:

<div class="wrapper"><input></div>

.wrapper {
    position: relative; 
}

input { padding-left: 20px; }

.wrapper:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 2px;
    left: 3px;
    content: "\f007";
}
Jonathan
  • 11
  • 2
1

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 <i> tag.

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: linear-gradient(to right, #ec008c, #fc6767); 
  color: white;
  min-width: 20px;
  text-align: center;
}
.soft-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border:2px solid #fc6767;
}
.soft-field:focus {
  border: 2px solid #ec008c;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="soft-codeon">
    <i class="fa fa-user icon"></i>
    <input class="soft-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="soft-codeon">
    <i class="fa fa-envelope icon"></i>
    <input class="soft-field" type="text" placeholder="Email" name="email">
  </div>
Soft CodeOn
  • 23
  • 6
  • 2
    The answer is helpful, but the sentence which is spam is not permitted. If you want to have something like that, you can put a link in your profile. – Makyen May 06 '20 at 04:53
  • While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Clijsters May 06 '20 at 08:52
1

Easy way ,but you need bootstrap

 <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
    </div>
    <input type="email" id="senha_nova" placeholder="Email">
  </div><!-- input-group -->

enter image description here

Bacar Pereira
  • 1,025
  • 13
  • 18
0

Make clickable icon to focus inside the text input element.

CSS

.myClass {
    font-size:20px;
    position:absolute; top:10px; left:10px;
}

HTML

<div>
    <label style="position:relative;">
         <i class="myClass fa fa-address-book-o"></i>
         <input class="w3-input" type="text" style="padding-left:40px;">
    </label>
</div>

Just add whichever icon you like inside the <i> tag, from Font Awesome library and enjoy the results.

Armand
  • 2,611
  • 2
  • 24
  • 39
0
<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>

<body>

<div class="inp1">          
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>
Richard Emert
  • 1
  • 3
    It will be more helpful to the OP if you also post some explanation about what this code block is doing! – Kim Aug 08 '18 at 05:01
0

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;
}
Rocky WEI
  • 1
0

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:

<div class="button__outer">
    <input type="submit" class="button" value="Send"/>
</div>

SASS code:

.button {
 display: inline-block;
 width: auto;
 height: 60px;
 line-height: 60px;
}

.button__outer {
    position: relative;
    display: inline-block;
    width: auto;

    &::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;
    }
}
Floris
  • 2,727
  • 2
  • 27
  • 47
0

Sometime the icon won't show up due to the Font Awesome version. For version 5, the css should be

.dropdown-wrapper::after {
     content: "\f078";
     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;
}
claudios
  • 6,588
  • 8
  • 47
  • 90
0

The below simple solution worked for me.

<input type="text" class="fa" placeholder="&#xf002; Search">

Use this filter for implement search: https://www.npmjs.com/package/ng2-search-filter

Sathiamoorthy
  • 8,831
  • 9
  • 65
  • 77
0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<style>
    .input {
        border: 1px solid black;
        width: 250px;
        padding: 10px;
        border-radius: 9999px;
    }
    .message-input {
        border: 0;
        outline: 0;
        margin-left: 20px;
    }
</style>
<body>
    <div class="input">
        <i class="fas fa-envelope"></i>
        <input class="message-input" type="text" placeholder="Message">
    </div>
</body>
</html>
Aghazada Jamil
  • 7
  • 1
-1
::-webkit-search-cancel-button {
        height: 10px;
        width: 10px;
        display: inline-block;
        /*background-color: #0e1d3033;*/
        content: "&#f00d;";
        font-family: FontAwesome;
        font-weight: 900;
        -webkit-appearance: searchfield-cancel-button !important;
    }
    input#searchInput {
        -webkit-appearance: searchfield !important;
    }

<input data-type="search" type="search" id="searchInput" class="form-control">
nobjta_9x_tq
  • 1,205
  • 14
  • 16
-3

I tried the below stuff and it really works well HTML

input.hai {
    width: 450px;
    padding-left: 25px;
    margin: 15px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: grey;
}
<div >

    <input class="hai" placeholder="Search term">

</div>
Sandid
  • 5
-5

To work this with unicode or fontawesome, you should add a span with class like below:

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;           
}
ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Web Designer cum Promoter
  • 1,334
  • 14
  • 26
-9
<!doctype html>
<html>
  <head>
    ## Heading ##
    <meta charset="utf-8">
      <title>
        Untitled Document
      </title>
      </head>
      <style>
        li {
          display: block;
          width: auto;
        }
        ul li> ul li {
          float: left;
        }
        ul li> ul {
          display: none;
          position: absolute;
        }
        li:hover > 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 >a {
          background: #ffffff;
        }
        ul li>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;
        }
      </style>
      <body>
        <ul>
          <li>
            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 1
                </h2>
              </div>
            </a>
            <ul class="submenu" >
              <li>
                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_1
                    </h2>
                  </div>
                </a>
              </li>
              <li>

                <a href="#" class="sub_m2">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_2
                    </h2>
                  </div>
                </a>
              </li>
              <li >

                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_3
                    </h2>
                  </div>
                </a>

              </li>
            </ul>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 2
                </h2>
              </div>
            </a>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 3
                </h2>
              </div>
            </a>

          </li>
          <li>

            <a href="#"  class="bottom">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 4
                </h2>
              </div>
            </a>

          </li>
        </ul>
      </body>
</html>
Gottlieb Notschnabel
  • 9,408
  • 18
  • 74
  • 116
ankit
  • 1
  • 2