html - 在 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

使用 fiddle 链接来查看它的实际效果

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 图标仅用于演示