add icon to input with html and css

Question

i need to create a input with html and css .

it must have icon , placeholder , icon in that .

like this :

i try to create this by this html code :

 <div class="username">
     <i class="fa fa-envelope icon"></i>
      <input type="text" placeholder="Username">
</div>
<div class="password">
     <i class="fa fa-envelope icon"></i>
      <input type="password" placeholder="Password">
</div>

and this css code :

   .username input[type="text"]{
    padding: 5px;
    position: relative;
    border-radius: 2px;
    border:1px solid #ECF0EF;
    height: 35px;
    -webkit-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);

}
.username i{
    position: absolute;
    z-index: 9999;
    height: 10px;

    line-height: 2;
}
.password input[type="password"]{
    padding: 5px;
    position: relative;
    border-radius: 2px;
    border:1px solid #ECF0EF;
    height: 30px;
    -webkit-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);

}
.password input::after{
    content: '<i class="fa fa-envelope icon"> ';
}
.password  i{
    position: absolute;
    z-index: 9999;
    height: 10px;

    line-height: 2;
}

but it not worked .

this is Demo

how can i do create like that ??

I hope you can find this useful https://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder — devolasoji, Sep 21 '19 at 21:31
@devolasoji thanks but i can not use the javascript . just html and css — mr-dortaj, Sep 21 '19 at 21:34

score 2 · Accepted Answer · answered Sep 21 '19 at 21:50

I made a couple of changes to the CSS and HTML (added another element for the other image).

app.component.css

.loginInput label{
    color: #A7AAB3;
}

/* EDITS START HERE */

.username,
.password {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 2px;
    border:1px solid #ECF0EF;
    height: 35px;
    -webkit-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
}

.username input[type="text"],
.password input[type="password"]{
    padding: 5px 27.5px;
    position: relative;
    border: none;
    background-color: unset;
}

.username i:first-child,
.password i:first-child {
  left: 7.5px;
    position: absolute;
    z-index: 9999;
}
.username i:last-child,
.password i:last-child {
    right: 7.5px;
    position: absolute;
    z-index: 9999;
}
.password input::after{
    content: '<i class="fa fa-envelope icon"> ';
}

/* EDITS END HERE */

.checkbox{
    float: left;
}

app.component.html

<div class="loginInput">
  <label>Or sign in with credentional </label>
    <div class="inputs">
      <div class="username">
        <i class="fa fa-envelope icon"></i>
        <input id="text" type="text" placeholder="Username">
        <!-- Added this line. -->
        <i class="fa fa-envelope icon"></i> 
      </div>
      <div class="password">
        <i class="fa fa-envelope icon"></i>
        <input type="password" placeholder="Password">
        <!-- Added this line. -->
        <i class="fa fa-envelope icon"></i>
      </div>
    <div class="rememberMe">
      <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
      <label for="styled-checkbox-1">Checkbox</label>
    </div>
  </div>
</div>

Here is a fork of your code with the changes made: https://stackblitz.com/edit/angular-nq6j8u.

Hope it helps!

score 2 · Answer 2 · answered Sep 21 '19 at 21:54

Make sure you have linked bootstrap and fontawesome to you head tag, then you proceed by coding these:

<div class="input-group mb-3">
    <div class="input-group-append">
        <span class="input-group-text"><i class="fas fa-user"></i></span>
    </div>
    <input type="text" name="" class="form-control input_user" value="" placeholder="username">
</div>
<div class="input-group mb-2">
    <div class="input-group-append">
        <span class="input-group-text"><i class="fas fa-key"></i></span>
    </div>
    <input type="password" name="" class="form-control input_pass" value="" placeholder="password">
</div>

then you continue with your styling

Anis R. · Answer 3 · 2019-09-21T21:59:24.667

The CSS content attribute does not support HTML, it only supports plain text, this is why the icon in ::after is not showing.

As you need to insert HTML content in this case, a possible solution could be to use Javascript (and jQuery in this example) to add the <i> element before and after the text inputs.

As for the CSS, for positioning the icons next to the input, you can use display: inline-block and possibly some margin, instead of position: absolute.

$(".username input, .password input").before("<i class='fa fa-envelope icon'></i>");
$(".username input, .password input").after("<i class='fa fa-envelope icon'></i>");

.username input[type="text"], .password input[type="password"]{
    padding: 5px;
    position: relative;
    border-radius: 2px;
    border:1px solid #ECF0EF;
    height: 35px;
    -webkit-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);
    box-shadow: 0px 0px 28px -15px rgba(0,0,0,1);

}
.username i, .password  i{
  display:inline-block;
  z-index: 9999;
  height: 10px;
  line-height: 2;
  margin: 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' />
<div class="username">
      <input type="text" placeholder="Username" />
</div>
<div class="password">
      <input type="password" placeholder="Password" />
</div>

Edit: And if you can only use HTML and CSS, there is not much to do, other than hard-coding the icons before and after each input:

<i class="fa fa-envelope icon"></i>
<input type="text" placeholder="Username" />
<i class="fa fa-envelope icon"></i>

score 0 · Answer 4 · answered Sep 21 '19 at 21:55

0

Am confused as to what exactly didn't work

But you can use this as a guide https://www.w3schools.com/howto/howto_css_login_form.asp

answered Sep 21 '19 at 21:55

OlasojiAmujo

1
1

score 0 · Answer 5 · answered Sep 21 '19 at 21:59

To add an icon to an input, the tag is usually used. Eg

<style> 


    .input-icons { 

        width: 100%; 

        margin-bottom: 10px; 

    } 



    .icon { 

        padding: 10px; 

        min-width: 40px; 

    } 



    .input-field { 

        width: 100%; 

        padding: 10px; 

        text-align: center; 

    } 

</style>

<h3> 

  Icons inside the input element

<div style="max-width:400px;margin:auto"> 

    <div class="input-icons">  

        <i class="fa fa-envelope icon"></i> 

        <input class="input-field" type="text"> 

        <i class="fa fa-padlock icon"></i> 

        <input class="input-field" type="password"> 

    </div>

score 0 · Answer 6 · answered Sep 21 '19 at 22:15

0

Please be sure that fontawesome is tagged in your code, with that, the code will work fine.

answered Sep 21 '19 at 22:15

Eshjay

1
1

add icon to input with html and css

6 Answers6