Use Font Awesome Icon in Placeholder

Use Font Awesome Icon in Placeholder

You can't add an icon and text because you can't apply a different font to part of a placeholder, however, if you are satisfied with just an icon then it can work. The FontAwesome icons are just characters with a custom font (you can look at the FontAwesome Cheatsheet for the escaped Unicode character in the content rule. In the less source code it's found in variables.less The challenge would be to swap the fonts when the input is not empty. Combine it with jQuery like this.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder=""/>
  </div>
</form>

With this CSS:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

And this (simple) jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

The transition between fonts will not be smooth, however.

Use Font Awesome (5) icon in input placeholder text

Remember to not use the general "Font Awesome 5" font family, you need to specifically end with the branch of icons you're working with. Here i am working the "Brands" category.

<input style="font-family:'Font Awesome 5 Brands' !important" type="text" placeholder="">

For a more sophisticated solution you could implement a class that works specifically on the placeholder text of a class like this and add that class to you input. Useful if you want a different font-family on your input values.

.useFontAwesomeFamily::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-ms-input-placeholder { /* Microsoft Edge */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::placeholder { /* Most modern browsers */
    font-family: "Font Awesome 5 Brands" !important;
}

And then add this class to your tag.

<input class="useFontAwesomeFamily" type="text" placeholder="">

Font Awesome5 with input placeholder

Set the font-family as below, but also set the font-weight according to which style you want to load. For Solid, the font-weight would be 900.

input {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

Here's a working CodePen to demonstrate.

This does require that you're properly loading Font Awesome 5, and it will only work in the Webfonts with CSS method. In the CodePen example, only Font Awesome Free Solid is being loaded.

Here's a reference showing the font weights associated with each Font Awesome style.

Font awesome icon in placeholder not showing up unless font weight set to 600

An idea is to create the placeholder as element outside the input in order to easily isolate the icon, then you can simulate the placeholder effect by playing with the focus state and some z-index.

input,label span {  font-family: Arial;  font-weight: 500;  color: #777;  font-size: 18px;}
label {  position: relative;}
label>span {  position: absolute;  top: 0;  left: 5px;  cursor: auto;}
input {  position: relative;}
input:focus {  z-index: 1;}

/* Or input:focus + span {  display:none;}
*/

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<label><input  style="font-weight:600"><span><i class="fas fa-search"></i> Location</span></label>

document.getElementById('fa').setAttribute('placeholder', '\uf14a');

.icon {  display: inline-block;  font-family: "Font Awesome 5 Free";  font-weight: 900;  font-style: normal;  font-variant: normal;  text-rendering: auto;  -webkit-font-smoothing: antialiased;}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
<input id='fa' class='icon'>

<div class="container">
  <label><b>Username</b></label>
  <input type="text" placeholder="Enter Username" name="uname" required>
  <i class="fa fa-user fa-lg"></i>
</div>

.container {
  position: relative;
}
.container i {
  position: absolute;
  left: 15px;
  top: 40px;
  color: gray;
}