اضافه کردن آیکون glyphicon به Input Box در بوت استرپ
Add Bootstrap Glyphicon to Input Box
چطور میتونم یک آیکون glyphicon رو به input box اضافه کنم با استفاده از بوت استرپ؟
سلام برای اضافه کردن آیکن ها میتونی از کد زیر استفاده کنی.کن که بوت استرپ 4 و بالاتر دیگه از Glyphicon پشتیبانی نمیکنه و به جای اون از آیکونهای Font Awesome استفاده میشه. اما اگر هنوز از بوت استرپ 3 استفاده میکنی، این راه حل مناسبه
<div class="input-group"> <span class="input-group-text"> <span class="glyphicon glyphicon-search"></span> </span> <input type="text" class="form-control" placeholder="Search"> </div>
تور این کدinput-group
برای گروه بندی آیکون و جعبه ورودی استفاده میشه
input-group-text
برای قرار دادن آیکون بهعنوان پیشنمونه (prepend) به ورودی استفاده شده.
glyphicon glyphicon-search
آیکون جستجو از Glyphicon رو نشون میده.
اگر قصد داری از بوت استرپ 5 استفاده کنی، بهتره از Font Awesome استفاده کنی چون Glyphicon در نسخههای جدیدتر بوت پشتیبانی نمیشه. برای اضافه کردن آیکونهای Font Awesome، از کد زیر استفاده کن
<div class="input-group"> <span class="input-group-text"> <i class="fa fa-search"></i> </span> <input type="text" class="form-control" placeholder="Search"> </div>
اینجا:fa fa-search
آیکون جستجو رو از Font Awesome رو نشون میده.