Remplacer le texte dans le menu avec l'icône dans le petit écran bootstrap

Question

Je peux ajouter des icônes à côté des textes dans le menu, mais ne parvient pas à masquer le texte (garder les icônes uniquement) en petit écran.

<ul class="nav navbar-nav"> 
    <li> 
    <a asp-area="" asp-controller="Home" asp-action="Index"> 
     <span class="glyphicon glyphicon-home"></span> 
     Home 
    </a> 
    </li> 
    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li> 
    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li> 
</ul> 

Aidez-nous! Merci.

Answer 1

Envelopper chaque élément de menu (texte, sans l'icône glyphe) dans une période avec une classe de-xs cachés. Cela masquera le texte et ne laissera les icônes que lorsque le site Web sera visionné sur des appareils xs.

<span class="hidden-xs">Home</span> 
<span class="hidden-xs">About</span> 
<span class="hidden-xs">Contact</span> 

Working demo on Codepen

fenêtre Redimensionner pour le tester.

Answer 2

Enveloppez votre texte dans un div ou la durée ou du paragraphe, comme celui-ci

<p class="hidden-xs">some text </p>