Currently utilizing Boostrap 4 for a simple 4 tab horizontal navigation. The desired display on big screens is: "Some text [font-awesome-icon]" x 4 tabs. For smaller screens, it should show as: "[font-awesome-icon]". While the display works, the font-awesome-icon consistently appears on the second line on large screens. The issue is illustrated below:
https://i.sstatic.net/P1XWu.png
The HTML code being used:
<!-- Nav tabs -->
<ul class="nav nav-tabs ">
<!-- profile -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
<!-- profile image -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile-image"><i class="fas fa-images"></i></a>
</li>
<!-- password -->
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#password"><i class="fas fa-unlock-alt"></i></a>
</li>
<!-- timezone -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#timezone"><i class="fas fa-clock"></i></a>
</li>
</ul>
Attempts to address the issue with 'nowrap' in various locations such as UL, LI, A, and SPAN were unsuccessful. Moving the 'fa-clock' element inside the span caused the entire text and tab to disappear on smaller screens. Any assistance on this matter would be greatly appreciated.