Добавить текст к значку на панели навигации Bootstrap 5

Это, наверное, глупый вопрос, но я не могу понять. Как добавить текст на панель навигации значков, например здесь?

Ниже моя навигационная панель; Я использую базовый CSS Bootstrap.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navbar start-->
    <nav class="navbar fixed-bottom navbar-dark navbar-expand bg-dark">
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav position-relative start-50 translate-middle-x">
                    <li class="nav-item active">
                        <a class="nav-link" aria-current="page" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24"><path d="M12.5 7.25a.75.75 0 00-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 00.744-1.302L12.5 12.315V7.25z"></path><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"></path></svg></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24"><path d="M2.5 2.75a.75.75 0 00-1.5 0v18.5c0 .414.336.75.75.75H20a.75.75 0 000-1.5H2.5V2.75z"></path><path d="M22.28 7.78a.75.75 0 00-1.06-1.06l-5.72 5.72-3.72-3.72a.75.75 0 00-1.06 0l-6 6a.75.75 0 101.06 1.06l5.47-5.47 3.72 3.72a.75.75 0 001.06 0l6.25-6.25z"></path></svg></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Navbar end-->


bootstrap-4 navbar bootstrap-5
person Community    schedule 11.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Есть несколько способов подойти к этому. Один из способов - сделать столбцы навигационных ссылок гибкими и (d-flex flex-column) добавить текст в отдельный диапазон ...

      <li class="nav-item">
           <a class="nav-link d-flex flex-column align-items-center" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24">
                        ...
              </svg>
              <span class="small">text</span>
           </a>
      </li>

Демо

person Zim    schedule 11.12.2020
comment
спасибо, что прекрасно работает. - person ; 11.12.2020