是否有一种语法上正确的方法用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
twitter bootstrap图标仅用于演示