Font Awesome icon inside text input element

font awesome icon inside input button
font awesome icon inside input bootstrap 4
clickable icon inside input field
how to add icon in textbox in html
image inside input box
font awesome icons
font awesome input placeholder
font awesome search icon

I am trying to insert a user icon inside username input field.

I've tried one of the solution from the similar question knowing that background-image property won't work since Font Awesome is a font.

The following is my approach and I can't get the icon display.

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

I have font face declared in the default font awesome css so I wasn't sure if adding font-family above was the right approach.

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }

You're right. :before and :after pseudo content is not intended to work on replaced content like img and input elements. Adding a wrapping element and declare a font-family is one of the possibilities, as is using a background image. Or maybe a html5 placeholder text fits your needs:

<input name="username" placeholder="&#61447;">

Browsers that don’t support the placeholder attribute will simply ignore it.

UPDATE

The before content selector selects the input: input[type="text"]:before. You should select the wrapper: .wrapper:before. See http://jsfiddle.net/allcaps/gA4rx/ . I also added the placeholder suggestion where the wrapper is redundant.

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

<p class="wrapper"><input placeholder="&#61447; Username"></p>
Fallback

Font Awesome uses the Unicode Private Use Area (PUA) to store icons. Other characters are not present and fall back to the browser default. That should be the same as any other input. If you define a font on input elements, then supply the same font as fallback for situations where us use an icon. Like this:

input { font-family: 'FontAwesome', YourFont; }

Font Awesome icon inside text input element, Bootstrap 3. Checkout the Bootstrap examples in the Font Awesome documentation: <div class="input-group margin-bottom-sm"> <span  Font Awesome uses the Unicode Private Use Area (PUA) to store icons. Other characters are not present and fall back to the browser default. That should be the same as any other input. If you define a font on input elements, then supply the same font as fallback for situations where us use an icon.

Output:

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(Or)

Output:

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>

Put a font-awesome icon inside an input tag, FontAwesome is a popular icon toolkit that offers a very wide variety of icons. input-lg rounded-0" id="email" name="email" type="text" placeholder="Email easy way to position elements: you can simply add a position-absolute class inside  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.

You could use a wrapper. Inside the wrapper, add the font awesome element i and the input element.

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

then set the wrapper's position to relative:

.wrapper { position: relative; }

and then set the i element's position to absolute, and set the correct place for it:

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(It's a hack, I know, but it gets the job done.)

How to Add Font Awesome Icons to Your Input Fields, Fold All; Unfold All. 4. 1. <label for="date">Date:</label>. 2. <div class="input-​wrapper">. 3. <input type="date" id="date" name="date" placeholder="Enter date"​>. Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc. Create an <input> tag followed by a standard <i> tag with the icon you need. Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.

This answer will work for you if you need the following conditions met (none of the current answers met these conditions):

  1. The icon is inside the text box
  2. The icon shouldn't disappear when text is entered into the input, and text entered goes to the right of the icon
  3. Clicking the icon should bring the underlying input into focus

I believe that 3 is the minimal number of HTML elements to satisfy these conditions:

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

Font Awesome icon positioned inside input element, class=“fa fa-input”>. where f0f6 is the unicode for the fa-file-text-o icon How do I add a Font Awesome icon to input field? html, css, html5  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:

No need to code a lot... just follow the following steps:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

you can find the links to the Unicode(fontawesome) here...

FontAwesome Unicode for icons

[Solved] Adding Font Awesome icons to an input button?, After you get up and running, you can place Font Awesome icons just about type="text" placeholder="Email address"> </div> <div class="input-prepend">  Since Font-Awesome adds the icons via pseudo elements, icons won't work on an input. I thought about figuring out which unicode character maps to which icon, and then just setting the button font to Font-Awesome, but I need text on the button as well.

Font Awesome Examples, <form action="/action_page.php"> <h2>Register Form</h2> <div class="input-​container"> <i class="fa fa-user icon"></i> <input class="input-field" type="text"  Edit: Use the fix from @Azaret below, it works great!. When attempting to use Font-Awesome icons within a Bootstrap input with feedback, the placement is off:. Font-Awesome is overwriting a couple of rules that fix this alignment:

How To Create a Form with Icons, I know how to use a placeholder for text, but how do people put things like a It's just a background image on the input field like was mentioned in the I'm using font awesome for my icon because icon fonts load faster than  The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa. Brand icons should only be used to represent the company or product to which they refer.

How do I put icons inside of input fields?, Code used : https://codepen.io/zFunx/pen/XRyqvx Part 1 : https://youtu.be/​omJfspwjnZk Get Duration: 6:07 Posted: May 21, 2017 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
  • What do you want to know? What is the question / error?
  • @allcaps Oops..I admit that there is no way to identify the error I am encountering from just looking at my original post. I edited a bit.
  • See my updated answer.
  • Using your placeholder method works. The trouble is that normal (non-icon) text does not match the font-face of the rest of the page and is displayed as browser default serif. Any way to get around this?
  • Font Awesome uses the Unicode Private Use Area (PUA) to store icons. Other characters are not present and fall back to the browser default. That should be the same as any other input. If you define a font on input elements somewhere, then supply the same font as fallback for situations where us use an icon: input { font-family: 'FontAwesome' YourFont; }. Does this help? You can always ask a new question.
  • @allcaps the recommendation to use a fallback font-family for the placeholder works WONDERS!! I didn't think to change the font through a fallback. Can you update your answer to include a fallback font for future users? Thanks!
  • where can i find list of code. i mean fa-user to &#61447;
  • @Elyor: You don't need to use the html entity. If your project is UTF-8, you can just copy paste the Font awesome glyph. It will probably show up as a block in your code editor, but that is okay. You can also use one of the many online unicode-to-html-entities-convertors.
  • That was excellent tip on using font-awesome with a text box.
  • Is it possible to make that icon clickable?
  • @FrenkyB, Yes. <span class="fa fa-info-circle errspan" onclick='YOUR_FUNCTION()'></span>
  • Setting z-index: 1 will make the underlying input catch the focus when you click on the icon - something you may want for instance when adding a datepicker.
  • Works fine for me but I didn't use position: relative (negative margins don't need it) nor z-index (as soon as the element is rendered after the input)
  • Why do we need a .wrapper there?