Put Icon Inside Input Element in a Form

Put icon inside input element in a form

The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.

In other words, they have these two CSS rules:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

How to insert icon inside input tag

Well you can use position absolute to position the icon over the input.

You might need to change the top value a little bit and the padding-right value. Check the comment inside the snippet below

.input-group {
  position:relative;
  display:inline-block;
}
.input-group-text {
  position: absolute;
  right:0;
  top: 0;
}

input {
  padding-right: 20px; /* = icon width if you don't want the password to go under the icon */ 
  }

<div class="input-group">
   <input id="password" type="password" class="form-login" />
   <div class="input-group-append">
     <span class="input-group-text">
       <i class="fas fa-eye" id="show_eye">icon</i>

     </span>
   </div>

 </div>

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 put icon inside an input box

A little bit of CSS should do the trick here.

Either add the following code snippet to a stylesheet or to a style block. Alternatively, you could apply the styles inline, directly on the HTML elements themselves.

CSS:

.test {
  position: relative;
}

.test .fas.fa-check {
  position: absolute;
  top: 0;
  right: 0;
}

UPDATE

If the form contains multiple select boxes in the same row, then they must be wrapped in a div which has relative positioning and inline display.

HTML/CSS to put icon inside password input field

1st you need to wrap input and icon inside same container
2nd style the container not the input itself .. border , flex... for container and remove outline , background , border... from input

With flex,flex-direction: row,align-items and simple change to the html structure it can be something like this

.join-login-form {
  background-color: #202027;
  width: 50vw;
  max-width: 50%;
  padding: 2rem 4rem;
  border-radius: 20px;
}

.input-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}
.input-group label{
  color : #fff;
  font-family : tahoma;
}
.input-group span{
  color : #888;
  font-family : tahoma;
  font-size: 11px;
}
.input-icon-container{
  display: flex;
  flex-direction: row;
  border: 1px solid #374669;
  border-radius: 5px;
  background : #fff;
  align-items : center;
  overflow: hidden;
}
.input-icon-container.error{
  border: 1px solid red;
  background : #fdd3d3;
}
.input-icon-container input {
  outline: none;
  border: none;
  background: none;
  font-size: 1em;
  padding: .5em;
  color: inherit;
  flex : auto 1 1;
  width : 100%;
  background : none;
  background-color : transperant;
}

.input-icon-container .fa{
  padding : 10px;
}

.fa.fa-user{
  background : #374669;
  color: #fff;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<form class="join-login-form">
  <div class="input-group" name="username">
    <label>UserName</label>
    <div class="input-icon-container">
      <input type="email"/>
      <i class="fa fa-check"></i>
    </div>
    <span>* Between 3 and 15 chars</span>
  </div>
  <div class="input-group" name="UserName">
    <label>UserName Left Icon</label>
    <div class="input-icon-container">
      <i class="fa fa-user"></i>
      <input type="email"/>
      <i class="fa fa-check"></i>
    </div>
    <span>* Between 3 and 15 chars</span>
  </div>
  <div class="input-group" name="UserName">
    <label>UserName Error</label>
    <div class="input-icon-container error">
      <input type="email"/>
      <i class="fa fa-times"></i>
    </div>
    <span>* Between 3 and 15 chars</span>
  </div>
  <div class="input-group" name="password">
    <label>Password</label>
    <div class="input-icon-container">
      <input type="password"/>
      <i class="fa fa-eye-slash"></i>
    </div>
    <span>* Between 4 and 30 chars</span>
  </div>
</form>

How to add icon inside the input field with the placeholder text

If you are using bootstrap4/bootstrap5 you can do easily

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    
<div class="container">  
  <div class="input-group">
    <div class="input-group-prepend">
        <div class="input-group-text">
           <i class="fas fa-search"></i>
         </div>
    </div>
    <input type="text" placeholder="search here" class="form-control" name="search" />
  </div>
</div>

Put two icons inside of an input field

The easiest way is to not put the icons in the input field, but style a container with a a prefix, the input and suffix. Remove all stylings from the input and then style the container like an input.

<div class="input">
  <span class="prefix"><i>YOUR ICON</i></span>
  <input />
  <span class="suffix"><i>YOUR ICON</i></span>
</div>

<style>
.input {
  display: flex;
  gap: 1rem;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5rem 0;
}

input {
  all: unset;
}
</style>

Here is a small codepen I created:
https://codepen.io/webfussel/pen/rNYPzyX

How to put Show / Hide Icon inside input field

I would suggest using absolute positioning to align the icon.

Wrap the two inputs (password & checkbox) in a div.

<div id="password-input-toggle">
  <input id="your-password-field"/>
  <input type="checkbox" id="your-toggle-checkbox"/>
</div>

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/

Put Icon Inside Input Element in a Form