CODEWITHSUNDEEP
htmlcssforms
user1876508
user1876508

Reputation: 13172

How can I add a font-awesome icon to an input box without bootstrap?

I want to include a font-awesome icon into a form input, but I am running into issues finding a solution. Looking on this site only gives questions with bootstrap, so I am including one without it. I tried adapting the code from this answer but the alignment is off. How can I fix this?

.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}
.left-addon .fa  { left:  0px;}
.left-addon input  { padding-left:  30px; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="inner-addon left-addon">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>

Upvotes: 0

Views: 589

Answers (2)

Jonathan
Jonathan

Reputation: 6537

Depending on what size you want your input to be, you could add additional padding to your input:

.left-addon input {
    padding: 8px 5px 8px 30px;
}

Or you could reduce the padding on the font-awesome icon:

.inner-addon .fa {
    position: absolute;
    padding: 3px 6px;
    pointer-events: none;
}


.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 3px 6px;
  pointer-events: none;
}
.left-addon .fa  { left:  0px;}
.left-addon input  { padding-left:  30px; }

.inner-addon-tall input {
  padding: 8px 5px 8px 30px;
}
.inner-addon-tall .fa {
  padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="inner-addon left-addon">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>
<br/><br/>
<div class="inner-addon left-addon inner-addon-tall">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>

Or you could do a combination of them both based on the height you want.

Upvotes: 2

ToujouAya
ToujouAya

Reputation: 593

Actually the code from this Add Bootstrap Glyphicon to Input Box is using the stylesheet from bootstrap so the height of the input is different.The simple way is change the padding value to 3px.

.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 3px; //Change this
  pointer-events: none;
}
.left-addon .fa  { left:  0px;}
.left-addon input  { padding-left:  30px; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="inner-addon left-addon">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>

Upvotes: 0

Related Questions