Member Avatar for jimmyruan1

Basicly the title say it all.

  • 2 Contributors
  • 1 Reply
  • 130 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Traevel
Member Avatar for Traevel

Try

.input-icon-wrapper {
    position: relative;
}
.input-icon-field {
    padding-left: 15px;    
}
.input-icon {
    position: absolute;
    top: 3px;
    left: 2px;
}

and

<div class="input-icon-wrapper">
    <span class="ui-icon ui-icon-person input-icon"></span>
    <input type="text"
           class="input-icon-field" 
           placeholder="Username" />
</div>

to get

2015-01-07--1420621621_202x32_scrot.png

Though you might want to consider using your own icons, or glyphicons for instance if you need more flexibility.

commented: Nice 'n simple :) +7
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.