پرسش

تغییر رنگ آیکون دکمه‌ های Accordion در بوت‌ استرپ ۵

Change Accordion Button Collapsed Icon Color in Bootstrap 5

سلام! من توی پروژه‌ ام از بوت‌استرپ ۵ استفاده میکنم و یه آکاردئون دارم. حالا میخوام رنگ آیکون‌ های دکمه‌ های collapsed رو تغییر بدم. چطوری میتونم این کار رو انجام بدم؟

#bootstrap #accordion

1403/06/05

پاسخ

مهرشاد براتی

بیوگرافی مهرشاد براتی

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Accordion</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
 <style>
    /* Custom CSS to change the color of the accordion button icon */
    .accordion-button::after {
      color: red; /* Change this color to your desired color */
    }
  </style>
</head>
<body>
  <div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Accordion Item #1
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      
        <div class="accordion-body">
          Content for the first accordion item.
        </div>
      </div>
    </div>
  </div>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

اینجا با CSS و تغییر رنگ در کلاس accordion-button::after، رنگ آیکون دکمه‌ ها رو به قرمز تغییر دادیم. میتونی به دلخواه رنگ دیگه‌ ای انتخاب کنی

پاسخ: 1403/06/05

آخرین آپدیت: 1403/08/10