Formular

Ahojte, potrebujem poradit ako dostat ikonku do formulara ako to je to tu
http://f.cl.ly/items/2N2e1e170q2D0x1J2D1e/form-1.png

Skusal som to tam dat ako font ale do placeholder="" to nejde. Cez pseudoelement :before to tam nejde.

Napr. http://stackoverflow.com/a/18839305

a trosku elegantnejsi sposob: http://codepen.io/hatto/pen/azxexG

vyhnes sa tak takymto riadkom v kode <i class="glyphicon glyphicon-user"></i> ktore tam nemaju co robit. zo semantickeho hladiska su tam naviac. aj z hladiska best-practice, kedze html kod by mal byt co najviac nezavisly od css. keby si chcel zmenit grafiku stranky, tak (teoreticky) by si mal zmenit iba css bez upravy html. a teda taketo bludy by tam boli naviac.

Čo presne v tom tvojom riešení zo sémantického hľadiska pridáva ten div tag?

PS: Pri tom input ti chýba padding-left (text sa zobrazuje cez tú ikonu).
PPS: Ďalšia vec, čo tam robí problém je to, že ak omylom klikneš na ten obrázok, tak vstupné políčko stratí fokus (a ako sa to rieši nájdeš napr v tom príspevku, na ktorý som poslal odkaz).

ja som o dive nepisal nic, ten div je tam ako wrapper inputu. ja som pisal o tom ze v tvojom rieseni je <i> zbytone.

upravene (s paddingom a z-indexom) : http://codepen.io/hatto/pen/azxexG

a uplne najjednoduschsie riesenie bez pouzitia wrapperu, <i>, ci pseudoelementov : http://codepen.io/hatto/pen/dPEbRx

Chcel som len naznačiť, že pre sémantických puristov je možné zmeniť ten i tag na div.

PS: Vo vedľajšej téme si písal, že robíš stránky kompatibilné s IE7+. SVG ako obrázok pozadia funguje až od IE9.

uz si nemal co povedat tak si napisal toto?
mna nemusis skusat z kompatibility css, ani z html ci js... ver tomu ze mam za sebou vela velkych projekto na to aby som vedel kde mozem co pouzit

ten <i> mozes zmenit na <div> ale to nemeni nic na tom ze budes mat prazdny tag v kode ktory je tam zbytocny.

ps: to ze mas ty iny nazor a ine praktiky to mi je jedno (dokonca som rad, lebo sa mozme navzajom od seba ucit). ja som napisal iny postup chalanovi (aj v tejto aj v tej druhej teme) nech ma dva pohlady na vec a je na nom ktory si vyberie.

Hatto presne takto ako si napisal nas to ucili aj na kurze cez background http://codepen.io/hatto/pen/dPEbRx. Ale sorry ze som to neupresnil. Ja by som chcel tu ikonku pridat aby sluzila ako placeholder, ze ked kliknem do pola tak ikonka zmizne.

v css sa to zrejme neda, kedze <input> nema attribut :empty.
takze som to spravil aj s pomocou jquery
http://codepen.io/hatto/pen/dPEbRx

aha tak jquery este nebudem do toho mesiat ked sa to este neucim. Myslel som ze sa to da do placeholder, ale nefunguje to. Ale dakujem za ochotu