Put a font-awesome icon inside an input tag

font awesome icons
font awesome icon inside input button
font awesome icon inside input bootstrap 4
how to put font awesome icon inside textbox
clear icon inside input text bootstrap
how to add icon in textbox in html
clickable icon inside input field
font awesome search icon

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:

How can I fix the icon?

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/

Font Awesome icon inside text input element, It is as simple as putting Font Awesome icon on any button. The <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages, it needs the font-awesome link inside the head section. The font-awesome icon can be placed by using the fa prefix before the icon's name. Actually I want to put eye in input field. You can check the next alternatives: (1) If you want to use a font-awesome icon like a placeholder for the input, then you can use the Unicode Cheatsheet. In the next example I show you how to do this:

input.form-control{
    margin-top: 0;
}

In my case it helps

How to place Font Awesome icon to input field ?, Inside these div containers, we have three elements. - A label tag for the form. - The input field. - i tag for FontAwesome:. Most of us do not know how to add the font-awesome icons inside input. Trying to use Font Awesome icons as placeholder text in an input field for the most part does not work by default. There is a very easy and awesome way to add font-awesome icons into input as place holder.

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.

How to Add Font Awesome Icons to Your Input Fields, xxxxxxxxxx. 4. 1. <label for="date">Date:</label>. 2. <div class="input-wrapper">. 3. <input type="date" id="date" name="date" placeholder="Enter date">. 4. I'm trying to add an <input type="reset"> with a Font Awesome icon. I can achieve this with a hyperlink or button but if I go down that route I need to use jQuery/JS to clear the form, which I'm trying to avoid for the time being. I'm curious to whether it's possible to achieve the same results. Please see the JSFiddle to see what I mean.

Font Awesome icon positioned inside input element, <form action="http://thenerdystudent.blogspot.co.uk/"> <input type="submit" value ="My blog" /> </form>. It works well as it is, but I'd like to add� CSS to put icon inside an input element in a form. To add icon inside the input element the <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages or in some specific area, it needs the fontawesome link inside the head tag. The fontawesome icon can be placed by using the fa prefix before the icon’s name.

[Solved] Adding Font Awesome icons to an input button?, Code used : https://codepen.io/zFunx/pen/XRyqvx Part 1 : https://youtu.be/ omJfspwjnZk Get Duration: 6:07 Posted: May 21, 2017 Font Awesome is a convenient library of icons. These icons can be vector graphics stored in the .svg file format or web fonts.. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.

CSS - ( Part 2 : Adding Icon ) Simple Input Text Box, To show how to put an icon inside an input element in a form using ://cdnjs. cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome. You can use relative absolute positioning with a wrapper div and text-ident.I'm using font awesome for my icon because icon fonts load faster than images due to saving on a http request.

Comments
  • Did you try to set <span> or <i> font-size ?
  • No I did not try. What should I set?
  • Add a class to <span class="test"> and then try to play with .test class font-size. Something like this : .test {font-size: 14px}
  • Adding fa-lg , fa-2x , fa-3x , ... class to <i> element is also doing that as well
  • If these examples have worked I would not have posted the question
  • No problem :) Glad it helped
  • Unfortunately, it seems that this solution no longer works for bootstrap4.0
  • @piotao I just added an example with Bootstrap 4 classes ;)
  • Thank you. I have spent a lot of time for this problem. Nice tip. It works.
  • It may work, but you are overriding Boostrap CSS, it will probably cause you some style issue on other inputs...
  • 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.