Показывать значок и текст на активной навигационной вкладке, значок только на неактивной

Question

У меня есть навигация с вкладками bootstrap с потрясающими шрифтами значками и текстом на каждой вкладке.

Когда вкладка активна, я хочу, чтобы отображались значок и текст. На неактивных вкладках должен отображаться только значок:

<div class="row" id="tabbedItemsRow">
    <div class="col-lg columnBlock">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#Content1">
                    <i class="fas fa-bell text-warning"></i> <!-- tab icon -->
                    Tab1  <!-- tab text-->
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#Content2">
                    <i class="fas fa-info text-primary"></i>
                    Tab2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#Content3">
                    <i class="fas fa-server text-primary"></i>
                    Tab3
                </a>
            </li>
        </ul>


        <div class="tab-content">
            <div id="Content1" class="tab-pane hide">
                Some content
            </div>
            <div id="Content2" class="tab-pane active">
                More content
            </div>
            <div id="Content3" class="tab-pane hide">
                Some  more content                
            </div>
        </div>
    </div>
</div>

Answer 1

Я должен был добавить <span> вокруг текста вкладки, чтобы иметь возможность обратиться к нему.

/* Hide text in the navigation tabs by default */
.nav-item span {
  display: none;
}
/* Show the one that's active */
.nav-item .active span {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="row" id="tabbedItemsRow">
  <div class="col-lg columnBlock">
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#Content1">
          <i class="fas fa-bell text-warning"></i>
          <!-- tab icon -->
          <span>Tab1</span>
          <!-- tab text-->
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#Content2">
          <i class="fas fa-info text-primary"></i>
          <span>Tab2</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#Content3">
          <i class="fas fa-server text-primary"></i>
          <span>Tab3</span>
        </a>
      </li>
    </ul>
    <div class="tab-content">
      <div id="Content1" class="tab-pane hide">
        Some content
      </div>
      <div id="Content2" class="tab-pane active">
        More content
      </div>
      <div id="Content3" class="tab-pane hide">
        Some more content
      </div>
    </div>
  </div>
</div>