چنین تکست باکسی رو چطوری طراحی میکنن؟

[man3207]

سلام
اگه بخوایم چنین ‌Textbox ی داشته باشیم(منظورم اون آیکن داخلشه) چکار باید بکنیم؟
134370
ممنون

[new_programer_79]

http://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form

[man3207]

http://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form
ممنونم.
حالا اگر بخوایم از این آیکونا توی تکست باکس اضافه کنیم چیکار کنیم؟
http://fortawesome.github.io/Font-Awesome/examples/
من با asp.net کار میکنم و قابلیت ‌bootstrap .همچنین فونتهای مربوط رو دانلود و در فولدر مخصوصشونم گذاشتم.
اگه به شکلی که توی سمپلا هست استفاده کنم خروجی در نمیاد.

[mojtabakhazaeli]

ممنونم.
حالا اگر بخوایم از این آیکونا توی تکست باکس اضافه کنیم چیکار کنیم؟
http://fortawesome.github.io/Font-Awesome/examples/
من با asp.net کار میکنم و قابلیت ‌bootstrap .همچنین فونتهای مربوط رو دانلود و در فولدر مخصوصشونم گذاشتم.
اگه به شکلی که توی سمپلا هست استفاده کنم خروجی در نمیاد.
از بک گراند استفاده کن این طوری :
اول این عکس رو با فتو شاپ کوچیک کن و ابعاد رو تنظیم کن
https://cdn4.iconfinder.com/data/icons/linecon/512/message-128.png
بعد این استایل رو بنویس


class or id {
background: url(adres) scroll left no-repeat;
}

همین!
اگر خواستی نوشته روی عکس نیاد به تکست باکس از چپ پدینگ بده
اگر خواستی کد رنگ هم داشته باشی در ادامه دستور من کد رنگ رو هم بزن
این طوری







class or id {
background: url(adres) scroll left no-repeat #000000;
}

[siros1983]

من اون بخش که نوشته روی عکس میاد نگرفتممن عکس مستقیما توی css با بک گراند آوردمش توی سرچم و توی همون بخش پدینگ دادم ولی بازم روی عکس میفته

#nav input[type=search]{
position:relative;
right:15px;
border:1px solid black;
padding-right:5px;
margin:8px 50px 5px 15px;
text-align:center;
width:150px;
border-radius:15px 15px 15px 15px;
background-color:gold;
background-image:url(img/search.png);
background-repeat:no-repeat;
background-size:32px;
background-position:-2px;
}