How to Add a Font Awesome Icon to Input Field

Font Awesome icon inside text input element

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="">

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=" Username"></p>

How to add font awesome icon inside input field?

So normally you add FontAwesome Icons either using the class structure such as:

fas fa-exclamation-circle

or you would use the content css style.

content: "\f06a";

The class system relies on the :before pseudo class, which does not work on self-closing HTML elements such as an input or a br tag

The content style also does not work on an input element

What I would do in something like this would be to wrap the input field in a container, add a FontAwesome element as the :after on the element.

<i class="fas fa-exclamation-circle"></i>

and then style my container to look like the input field, while removing some styles from the input field itself such as background color and border. You'll then need to work out the best way to have the FontAwesome icon side beside the form field.

Field HTML:

<form>
    <label for="name">Name</label>
    <div class="formField">
        <input class="valid" type="text" name="name" />
    </div>
</form>

Sample Styles

.formField{
    border-color: #28a745;
    padding-right: 30px;
    position: relative;
}
input.valid{
    background-color: transparent;
    border: 0;
    margin-right: 50px;
}
.formField:after{
    position: absolute;
    transform: translate(0,-50%);
    right: 0;
    top: 50%;
    font-family: "Font Awesome 5 Pro";
    content: "\f06a";
}

Depending on what FontAwesome license you have, you might need to change the font-family style to match what you need it to be.

You may need to adjust some of the styles to meet your needs, but this should give you something to start with.

JSFiddle:
https://jsfiddle.net/8jz9ngpu/

how to set font awesome icon in input tag

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

How can I apply a Font Awesome icon to a custom file input?

You can't dump classes in as content and expect that to work. You also can't apply classes to pseudo-elements in general.

Instead, you can add the Font Awesome 5 icon as an absolutely-positioned element.

.custom-file {
  position: relative;
  background: #ddd;
}

.custom-file i {
  position: absolute;
  right: 10px;
  bottom: 2px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="custom-file">
  <p> file : </p>
  <input type="file" class="custom-file-input" id="validatedCustomFile" required>
  <label class="custom-file-label" for="validatedCustomFile"></label>
  <i class="fas fa-paperclip"></i>
</div>

Put a font-awesome icon inside an input tag

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/