تغییر آیکون منو کشویی در بوت استرپ

بسلام  آیکون های  منو کشویی با استفاده از کلاس‌های پیش‌فرض تنظیم میشن و معمولا از آیکون‌ های font-awesome استفاده می‌کنن

برای تغییر آیکون منو کشویی، اول نیاز داری که آیکون جدید رو اضافه کنی. مثلا اگر بخوای از Font Awesome استفاده کنی، باید کلاس‌های مربوط رو به منوی کشویی اضافه کنی.

<!-- HTML --> 
<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button 
   </button> 
   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
   </ul>
</div>

/* CSS */ 
.dropdown-toggle::after { 
content: "\f0d7"; font-family: font-weight: 900; 
}

اگر از آیکون‌ های دیگه استفاده میکنی باید CSS مربوط به اون آیکون رو تو استایل‌ های خودت اضافه کنی و کلاس‌ های مربوطه رو به دکمه کشویی اضافه کنی.

این روش بهت این امکان رو میده که به راحتی آیکون کشویی رو با آیکون دلخواهت جایگزین کنی. فقط یادت باشه که به نسخه‌ های جدیدتر Font Awesome و بوت استرپ هم توجه کنی که سازگاری لازم رو داشته باشن.