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 stackoverflow.com/questions/19350291/… — devolasoji
– devolasoji, Commented Sep 21, 2019 at 21:31
@devolasoji thanks but i can not use the javascript . just html and css — mr-dortaj
– mr-dortaj, Commented Sep 21, 2019 at 21:34

Marvin Parada · Accepted Answer · 2019-09-21 21:50:04Z

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!

Phenom · Accepted Answer · 2019-09-21 21:54:09Z

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

OlasojiAmujo · Accepted Answer · 2019-09-21 21:55:21Z

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

Fiona · Accepted Answer · 2019-09-21 21:59:20Z

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>

Anis R. · Accepted Answer · 2019-09-21 21:59:24Z

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>

Eshjay · Accepted Answer · 2019-09-21 22:15:33Z

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

Collectives™ on Stack Overflow

add icon to input with html and css

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related