Bagaimana untuk menukar ikon lungsur turun dalam Bootstrap 5?

Question

Saya perlu menukar ikon lalai yang ditunjukkan dalam menu lungsur Bootstrap 5 kepada aksara Font Awesome.

Saya telah membaca dokumentasi tetapi tiada apa-apa yang berguna. Saya telah cuba menulis semula CSS tetapi tidak berjaya.

Bagaimana untuk menukar ikon lungsur dalam Bootstrap 5?

Answer 1

Baiklah, saya andaikan anda sudah mempunyai pautan rel="stylesheet" dalam pengepala html anda. Ini adalah versi terbaharu yang patut anda gunakan, tetapi saya cuba menggunakan versi yang lebih lama dan ia juga berkesan:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Kemudian saya mengambil menu lungsur Bootstrap 5 dan menambah kelas turun turun tersuai:

<div class="dropdown custom-dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <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>

Kemudian buat kandungan berikut dalam fail css:

.custom-dropdown .dropdown-toggle::after {
  content: '\f1b2'; /* Replace this with the desired Font Awesome icon code */
  font-family: 'Font Awesome 5 Free'; /* Specify the Font Awesome font-family */
  font-weight: 900; /* Adjust the font weight if needed */
  border-top: 0;
  vertical-align: middle;
}

Saya tidak pernah menggunakan fon Awesome sebelum ini, tetapi tanpa menggunakan sempadan atas 0 saya melihat bar putih di atas ikon. Itulah sebabnya saya menggunakan bordertop dan Verticalalign untuk menjajarkan ikon.

Atau anda boleh melakukan ini dalam CSS:

.custom-dropdown .dropdown-toggle::after {
  display: none;
}

Kemudian gunakan ikon seperti ini:

<div class="dropdown custom-dropdown">
                <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                    <i class="fa-solid fa-cube"></i>
                </button>
                <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li><a className="dropdown-item" href="#">Action</a></li>
                    <li><a className="dropdown-item" href="#">Another action</a></li>
                    <li><a className="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>

Selepas menukar ikon semak jika semuanya berfungsi seperti yang anda mahu, jika ya, anda boleh menandai jawapan anda sebagai betul :)