Welcome to WebmasterWorld Guest from 54.146.206.127

Forum Moderators: not2easy

Message Too Old, No Replies

Input fields using icons

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


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.
1:47 pm on Mar 31, 2017 (gmt 0)

Junior Member

joined:Apr 21, 2016
posts: 65
votes: 12


is it showing anywhere?
could it be that the font family is wrong? font-family: 'awersome'; -> font-family: 'awesome';
6:54 am on Apr 1, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1088
votes: 1


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,
12:20 pm on Apr 1, 2017 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
1:48 pm on Apr 1, 2017 (gmt 0)

Junior Member

joined:Apr 21, 2016
posts: 65
votes: 12


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

<input type="email" name="" class="fa fa-icon-envelope" placeholder=" &#xf0e0; E-mail" />

and it worked. Hope it works for you.
2:25 pm on Apr 1, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2310
votes: 613


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 "&#xf0e0;"
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.
7:08 pm on Apr 1, 2017 (gmt 0)

Junior Member

joined:Apr 21, 2016
posts: 65
votes: 12


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

you only need to insert it in the placeholder.
12:08 am on Apr 2, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2310
votes: 613


@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.
8:23 pm on Apr 2, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts:1088
votes: 1


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.