Adakah mungkin untuk menukar senarai ke bar alat dalam mod responsif?

Question

Saya mempunyai kad berikut. nav Terdapat banyak projek (saya telah menyimpan satu di sini untuk ringkas).

<div class="col-md-3">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">title</h3>
        </div>
        <div class="card-body p-0">
            <ul class="nav nav-pills flex-column">
                <li class="nav-item">
                    <NavLink href="javascript: void(0);" @onclick="() => ShowSearch()" class="nav-link">
                        <span class="fa-li pl-5"><i class="fas fa-search" /></span>
                        <span class="pl-4">Search</span>
                    </NavLink>
                </li>
            </ul>
        </div>
        <div class="card-footer">
            <NavLink href="Back" class="nav-link">
                <span class="fa-li pl-5"><i class="fas fa-arrow-alt-circle-left"/></span> 
                <span class="pl-1">Back</span>
            </NavLink>
        </div>
    </div>
</div>

Semua kandungan dipaparkan dengan betul walaupun pada peranti mudah alih.

Walau bagaimanapun, saya ingin tahu sama ada boleh "menukar" senarai navigasi kepada beberapa jenis bar alat (masih dalam badan kad) dan memaparkan item bersebelahan dan hanya menunjukkan ikonnya. Perkara seperti ini:

Adakah boleh?

Answer 1

Bootstrap 4 tidak mempunyai sokongan ikonnya sendiri, Tetapi untuk mencapai output sedemikian, gunakan perpustakaan fon kecil di bawah.

1)