在活动导航选项卡上显示图标和文本，仅在非活动状态下显示图标

Question

I have bootstrap's tabbed navigation with font-awesome icons and text in each tab.

When a tab is active, I want both the icon and text to display. On the inactive tabs, only the icon should show up:

<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

I had to add a <span> around the text of the tab to be able to address it.

 /* 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>