CODEWITHSUNDEEP
htmlcss
Maulik Kanani
Maulik Kanani

Reputation: 69

how to set font awesome icon in input tag

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;
}

Upvotes: 1

Views: 6936

Answers (5)

AlphaX
AlphaX

Reputation: 661

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>

Upvotes: 0

Bhavanaditya
Bhavanaditya

Reputation: 558

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

Upvotes: 0

Arun Redhu
Arun Redhu

Reputation: 1579

<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;
  }

Upvotes: 0

Girija V
Girija V

Reputation: 73

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;
}

Upvotes: 1

rachmatsasongko
rachmatsasongko

Reputation: 186

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;
}

Upvotes: 1

Related Questions