8

I'm trying to put a Font-awesome icon inside an input tag.

This is my HTML code:

<div class="input-group">
        <input class="form-control" type="password" placeholder="Password">
        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
</div>

But that icon is bigger than input box as you can see in this picture:

enter image description here

How can I fix the icon?

Community
  • 1
  • 1
harry-potter
  • 1,981
  • 5
  • 29
  • 55

3 Answers3

20

Bootstrap 3

Checkout the Bootstrap examples in the Font Awesome documentation:

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

It should work out of the box, so if you still have height differences, check that there is not other CSS stuff that override your input-group-addon height

Working JSFiddle: https://jsfiddle.net/vs0wpy80

Bootstrap 4

Bootstrap 4 introduced some new classes for input groups, we need to use input-group-prepend and input-group-append:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
  </div>
  <input class="form-control" type="text" placeholder="Email address">
</div>

<div class="input-group mb-3">
  <input class="form-control" type="text" placeholder="Email address">
  <div class="input-group-append">
    <span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
  </div>
</div>

Working JSFiddle: https://jsfiddle.net/8do9v4dp/5/

Finrod
  • 2,425
  • 4
  • 28
  • 38
3
input.form-control{
    margin-top: 0;
}

In my case it helps

Alan Mroczek
  • 1,099
  • 1
  • 11
  • 27
  • 1
    Thank you. I have spent a lot of time for this problem. Nice tip. It works. – harry-potter Oct 10 '16 at 13:26
  • It may work, but you are overriding Boostrap CSS, it will probably cause you some style issue on other inputs... – Finrod Oct 10 '16 at 13:29
  • Yes, you're right. We can't use it straight in way I posted it, because we may broke layout. We have to provide precise selector to element which we override. I've just posted example how we can do it, without selector because I hadn't any markup. – Alan Mroczek Oct 11 '16 at 11:16
1

With CSS only

<div class="wrapper">
   <input type="text" class="input">
   <i class="icon" class="fas fa-some-icon"></i>
</div>

Wrap the input and the icon in a 2 columns grid with this column template: 1fr 0

.wrapper {
    display: grid;
    grid-template-columns: 1fr 0;
}

Give the icon a relative position from the right:

.icon{
    width: 40px;
    position: relative;
    right: 45px;
    font-size: 35px;
    line-height: 40px;
    cursor: pointer
    z-index: 1;
}

Give the input a nice padding on the margin:

.input{
    padding-right: 57px;
}

The input will take 100% of the space in the grid and the icon will float atop.

Works well with responsive designs and you can click on the icon.

user10523399
  • 35
  • 5