how to set font awesome icon in input tag

Question

Here is the code of input tag and icon:

<input type="email" placeholder="Username" id="tutu" required />

CSS

#tutu{
    border-radius: 3px;
    border: 1px silver solid;
    padding-left: 10px;
    font-weight: bolder;
    color: #bcbcbc;
    height: 40px;
    width: 350px;
}

no it's not working i am using and i use the id in input tag so, i can't use class in input tag again — Maulik Kanani, Jan 11 '17 at 05:47
Possible duplicate of [How to get font awesome icon into input type text](http://stackoverflow.com/questions/41566192/how-to-get-font-awesome-icon-into-input-type-text) — Mohammad Usman, Jan 11 '17 at 05:52
Refer: http://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder — sansan, Jan 11 '17 at 05:59
Possible duplicate of [How do I add a Font Awesome icon to input field?](https://stackoverflow.com/questions/15988373/how-do-i-add-a-font-awesome-icon-to-input-field) — , Feb 14 '19 at 07:34

score 1 · Accepted Answer · answered Jan 11 '17 at 06:00

Try to wrap the input and icon into a parent div like this

<div class="tutuclass">
    <input type="email" placeholder="Username" id="tutu" required />
    <i class="fa fa-user"></i>
</div>

Then change the css as follow

.tutuclass #tutu{
    border-radius: 3px;
    border: 1px silver solid;
    padding-left: 10px;
    font-weight: bolder;
    color: #bcbcbc;
    height: 40px;
    width: 350px;
}
.tutuclass .fa {
    margin: auto -30px;
}

score 1 · Answer 2 · answered Jan 11 '17 at 06:02

Code for Font-awesome icon in placeholder

<html>
   <head>
      <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
   </head>
   <body>
      <input type='text' placeholder='&#xf02b; Type any Text'></input>
   </body>     
</html>

css code

 input {
 padding:10px;
 font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
 font-style: normal;
 font-weight: normal;
 text-decoration: inherit;
}

score 0 · Answer 3 · answered Jan 11 '17 at 06:02

<div class="login-controls">
  <label> 
        <i class="fa fa-user"></i>
  </label>
  <input type="text" placeholder="Username" />
</div>

For css

.login-controls{
      margin: 10px 0;
      border-bottom: 1px solid #000000;
      padding: 10px 5px;
}
.login-controls>label{
        width: 10%;
        min-width: 50px;
 }
 .login-controls>input{
        width: 90%;
        background: transparent;
        border: none;
        outline: none;
        padding: 5px 10px;
  }

score 0 · Answer 4 · answered Jan 11 '17 at 06:05

Try this link. It may helps you need.

Html Code

<input type="email" placeholder="&#61447; Username" id="tutu" required/>

CSS Code

.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: -10px;
  content: "\f007";
}


/* This is for the Textbox */

#tutu {
  border-radius: 3px;
  border: 1px silver solid;
  padding-left: 10px;
  font-weight: bolder;
  color: #bcbcbc;
  height: 40px;
  width: 350px;
}

Link - Click here

score 0 · Answer 5 · answered Feb 24 '18 at 14:24

I think rachmatsasongko answer is almost perfect. The only problem is that the text will run behind the icon, but you can fix this with a piece of extra css

I made a quick fiddle JSFIDDLE

.tutuclass #tutu{
border-radius: 3px;
border: 1px silver solid;
padding-left: 10px;
font-weight: bolder;
color: #bcbcbc;
height: 40px;
width: 350px;
}
.tutuclass .fa {
margin: auto -30px;
color: #fff;
}
input[type="email"] {
background: #000;
padding-right: 50px; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="tutuclass">
<input type="email" placeholder="Username" id="tutu" required />
<i class="fa fa-user"></i>
</div>

how to set font awesome icon in input tag

CSS

5 Answers5