是否有與CSS/HTML圖標替換文本語法正確的方式

Question

我的代碼看起來像

<nav> 
<ul> 
    <li>link 1 </li> 
    <li>link 2 </li> 
    <li>link 3 </li> 
    <li>link 4 </li> 
</ul> 
</nav> 

我想知道如果有一種方法，我可以隱藏在小型設備上的文本link #（使用媒體查詢）並將其替換爲圖標（即，當頁面全屏時不會出現的圖標）。

有什麼建議嗎？

Answer 1

發揮與小提琴鏈接，看到它在行動

HTML

<nav> 
<ul> 
    <li><span class="text">link 1 </span> <span class="glyphicon glyphicon-screenshot icon"></span></li> 
    <li><span class="text">link 2 </span> <span class="glyphicon glyphicon-screenshot icon"></span></li> 
    <li><span class="text">link 3 </span> <span class="glyphicon glyphicon-screenshot icon"></span></li> 
    <li><span class="text">link 4 </span> <span class="glyphicon glyphicon-screenshot icon"></span></li> 
</ul> 
</nav> 

CSS

.icon{ 
     display : none; 
    } 
    @media (max-width: 500px) { 
    /* 500px is random value, adjust it as per your need */ 
    .icon{ 
     display : block; 
    } 
    .text{ 
     display:none; 
    } 
    } 

JSFIDDLE LINK
TW itter bootstrap圖標僅用於演示

Answer 2

<nav> 
    <ul> 
    <li> 
     <a href="#"> 
     <span class="mobile-removed">link 1</span> 
     <span class="mobile-added">Icon Code Here</span> 
     </a> 
    </li> 
    </ul> 
</nav> 

您的主CSS文件應顯示：無移動添加的類和您的移動CSS應顯示：無移動移除的類。

它可能不是最好的方法，但它會工作。