پرسش

اضافه کردن آیکون glyphicon به Input Box در بوت استرپ

Add Bootstrap Glyphicon to Input Box

چطور میتونم یک آیکون glyphicon رو به  input box اضافه کنم با استفاده از بوت استرپ؟

 

1403/05/31
پاسخ

سلام برای اضافه کردن آیکن‌ ها  می‌تونی از کد زیر استفاده کنی.کن که بوت استرپ 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 رو نشون میده.

پاسخ: 1403/05/31
آخرین آپدیت: 1403/07/19