Input fields using icons

Forum Moderators: not2easy

Message Too Old, No Replies

Input fields using icons

toplisek

10:35 am on Mar 31, 2017 (gmt 0)

div.form_item_email1.icons-resp-email1::before {
position: absolute;
z-index: 10;
top: 0;
left: 10px;
}
div.form_item_email1.icons-resp-email1::before {
width: 30px;
line-height: 1;
margin-top: 15px;
text-align: center;
}
div.form_item_email1.icons-resp-email1::before {
font-family: 'awersome';
content: "";
color: #DDD;
font-size: 1.8em;
font-size: 1.8rem;
}
.position-relative1 {
position: relative;
}

<div class="form_item_email1 icons-resp-email1"><div class="position-relative1">

<input type="email" name="" placeholder="E-mail" />

</div></div>

Need help why is icon responsive not shown inside input.

ipco

1:47 pm on Mar 31, 2017 (gmt 0)

is it showing anywhere?
could it be that the font family is wrong? font-family: 'awersome'; -> font-family: 'awesome';

toplisek

6:54 am on Apr 1, 2017 (gmt 0)

You can replace icon familiy. Icons are showing. It is an issue they are OUTSIDE input filelds.
Awersome icons are managed using different classes. It can be used other fonts,

birdbrain

12:20 pm on Apr 1, 2017 (gmt 0)

Hi there toplisek.

I assume that you are trying to put a Font Awesome icon in the placeholder attribute. ;)

If that assumption is correct, then here is an example - ( using the envelope icon )...


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
#email {
 padding-left: 0.5em;
 font-family: FontAwesome;
 }
</style>
</head>
<body> 
    <input id="email" type="email" name="email" placeholder="&#xf003; E-mail"> 
<script src="http://email.tl.fortawesome.com/c/eJxNjUEOgyAURE-jS_I_IMqCRUn0HgKfaKvSCNbrl-6azGJmknkTTCAVqG9XwwF7kIDIQcuBdVyLgdXAOzZaO9nRPhoJZWMxnWW-KaedmE97uxgNHHuBWjkfZ17NAE6gd2EA4hhdu5mllHduxKPhU9WVqWKOf0xtowraIQip2DO3p_EplYXmUG_vtZRMR8BOsngSZTo_vxm7Xl8hWTsx"></script>
</body>
</html>

Obviously, the javascript link is only there for the sake of this example. :)

birdbrain

ipco

1:48 pm on Apr 1, 2017 (gmt 0)

Put the font CODE inside the placeholder. I used icon-envelope

<input type="email" name="" class="fa fa-icon-envelope" placeholder="  E-mail" />

and it worked. Hope it works for you.

NickMNS

2:25 pm on Apr 1, 2017 (gmt 0)

Your "content" field in the css is set to "", empty.

content:"";

You need to add in what you want to appear "before". Say for example as ipco suggested ""

content:"&#xf0e0;"

Ipco's solution is simpler and should work.

To makes things easier for others to read when posting code, one can use [code][/code], and include the correct indentation.

ipco

7:08 pm on Apr 1, 2017 (gmt 0)

content is a string. anything you add there will show literally.

content: "";

you only need to insert it in the placeholder.

NickMNS

12:08 am on Apr 2, 2017 (gmt 0)

@ipco, you are correct about "placeholder" and as I said that is by far the simplest solution. But, when using placeholder, as soon as you begin to type in the field the text or icon disappears. This may not be a desired action.

Here is a fiddle to demonstrate both functionalities: [jsfiddle.net...]

@toplisek, you need to add a span before the input, then use :before on the span, then using margins, padding and position force the text back over the input.

toplisek

8:23 pm on Apr 2, 2017 (gmt 0)

Thank you for all replies. I have to test again this script.

Need to test as there is also z-index: 10;. Maybe it is too low for my design compared to other elements.