[Resolved] Need help positioning glyphicon icons in login form

[Author]

Posts

[Robert Campbell]

Sorry for the double ticket on this topic!

I've created a custom login page using the [wpv-login-form] shortcode. The only problem I have is getting the bootstrap glyphicon icons to position properly, so that they line up just before their respective input fields.

You can see the form at hidden link

Content template code to date:-

<br>
<br>
<div class="logborder">
<h4>
Log In to Audio Gear
</h4>

<i class="glyphicon glyphicon-user"></i>
  
<i class="glyphicon glyphicon-lock"></i>
  
[wpv-login-form redirect_url="<em><u>hidden link</u></em>"]
Forgot your password?
<br>
<br>
</div>
<br>
<br>

CSS

.page-id-30648 .entry-content {
background-color: #f1f1f1;
}

.logborder
{
width: 320px;
margin: auto;
background: white;
border: 1px solid #e5e5e5;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05);
text-align: center;
}

form#loginform input#user_login {
padding-left: 35px;
}

form#loginform input#user_pass {
padding-left: 35px;
}

form#loginform
{
padding:0px 28px 28px 28px;
}

form#loginform p label {
display: none;
}

form#loginform input {
width: 100%;
height: 40px;
font-size: 16px;
line-height: 40px;
}

form#loginform input#wp-submit {
background: #60c43f;
border-color: #4c9f31;
color: white;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
border-radius: 2px;
border: 1px solid #d9d9d9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255, 255, 255, 0.05);
width: 100%;
}

JS

$('#user_login').attr('placeholder', 'Username');

$('#user_pass').attr('placeholder', 'Password');

Could you help advise me how best to position the two bootstrap icons to they will stay in the correct place irrespective of screen size and the appearance of error messages (e.g. ERROR: The username field is empty.)

Regards

Robert

[Nigel]

Hi Robert

I would remove the icons from your template and insert them with JavaScript, or, rather, jQuery.

Something like this:

$('<i class="glyphicon glyphicon-user"></i>').insertBefore('#user_login');
$('<i class="glyphicon glyphicon-lock"></i>').insertBefore('#user_pass');

You will need to tweak your CSS to make space for the icons, adding left margins to the input to accommodate them.

You are using the jQuery insertBefore method for this: hidden link

[Robert Campbell]

Hi Nigel

I tried using the code you suggested but the glyphicons get inserted into the rows above the input field boxes. I want the glyphicons to appear inside the input field boxes.

The only way I could find to place them inside the boxes is using the position: relative code. Here's what seems to work:-

CONTENT

<br>
<br>
<div class="logborder">
<h4>
Log In to Audio Gear
</h4>
[wpv-login-form redirect_url="<em><u>hidden link</u></em>"]
Forgot your password?
<br>
<br>
</div>
<br>
<br>

CSS

.page-id-30648 .entry-content {
background-color: #f1f1f1;
}

.logborder
{
width: 320px;
margin: auto;
background: white;
border: 1px solid #e5e5e5;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05);
text-align: center;
}

form#loginform input#user_login {
padding-left: 35px;
}

form#loginform input#user_pass {
padding-left: 35px;
}

.glyphicon-user{
float: left;
position: relative;
top: 25px;
left: 10px;
}

.glyphicon-lock{
float: left;
position: relative;
top: 25px;
left: 10px;
}

form#loginform
{
padding:0px 28px 28px 28px;
}

form#loginform p label {
display: none;
}

form#loginform input {
width: 100%;
height: 40px;
font-size: 16px;
line-height: 40px;
}

form#loginform input#wp-submit {
background: #60c43f;
border-color: #4c9f31;
color: white;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
border-radius: 2px;
border: 1px solid #d9d9d9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255, 255, 255, 0.05);
width: 100%;
}

JS

$('#user_login').attr('placeholder', 'Username');
$('#user_pass').attr('placeholder', 'Password');

$('<i class="glyphicon glyphicon-user"></i>').insertBefore('#user_login');
$('<i class="glyphicon glyphicon-lock"></i>').insertBefore('#user_pass');

Have a look to hidden link

Is this the best way? Or is there another way to use .insertBefore but keep the glyphicon within the input field boxes?

Regards

Robert

[Nigel]

Hi Robert

Sorry, I had not understood that you wanted the icons to appear as if they were within the input field, I thought you meant for them to be to the left of them.

What you have done looks fine, you need to either use float or position absolute to locate the icons where you want them in that case.

The alternative would be to remove the border from the input element and add it to the p element that surrounds both the icon and the input, which would give you a similar visual result, but I don't see any reason to change what you have done.

[Robert Campbell]

Hi Nigel

Thanks for the confirmation and further advice. Should be fine with this now.

Regards

Robert