icons inside my form inputs making my form not align properly

[NikeAirforce1s]

Hey everyone,

When I have my icons (From font awesome) inside my form, it pushes my form out of alignment with each other, my form has a class of “signin-form” and I’ve positioned it relatively and the icons inside “signin form i” positioned also relatively so it could fit in the input….pls take a look at my codepen

Cheers

http://codepen.io/waggawagga/pen/dPYWVw

[Paulie_D]

I think you’ll find that it’s becuase the icons font glyphs aren’t all the same width.

http://codepen.io/Paulie-D/pen/LEpymM

Even though you’ve moved them visually using position relative the broswer remembers where they are supposed to be and allocates space for them.

[Paulie_D]

If you set the width of the i tags to be the same for all of them (say 1.5 em) then they will line up again

http://codepen.io/Paulie-D/pen/Kwdmem

[NikeAirforce1s]

Thanks Paulie, you’re the best, sorry if I ask simple questions at times but you’ve rescued me again….cheers.

Edit
What about the “sign in button”…how can I now get that to align pls?

[Paulie_D]

Well, that’s a niggle.

You’ve used relative positioning on the others so

    position: relative;
    left: 14px;

A couple of things, placeholder is not a proper substitute for a label even if you don’t use the label value it’s a better wrapper than a p tag.

If I were starting from scratch, I would position the icon absolutely in relation to it’s wrapper so that it’s out of the flow and everything else would be block level and would just center automatically using margin:auto.

Kinda like

http://codepen.io/Paulie-D/pen/myegXx

[Author]

Posts