The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS icons inside my form inputs making my form not align properly

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #189675

    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



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

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


    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


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

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


    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.