如何隐藏文本但将图标保留在小屏幕上？

Question

当屏幕变小时，我想隐藏 Home/Reservations/myReservations/About/Settings 这些词，但我希望图标在较小的屏幕上仍然可见。我目前正在使用：

http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css

http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js

<nav class="navbar navbar-default">
   <div class="container-fluid">
      <div id='test' ng-click="doTheBack()"><a class="navbar-brand"><i class="fa fa-arrow-left"></i>Back</a></div>
         <div class="nav navbar-nav navbar-left">


        </div>
      <div>
  <ul class="nav navbar-nav navbar-right">
    <a class="navbar-brand visible-lg" href="/landingIndex.html"><i class="fa fa-home"></i>Home</a>
    <a class="navbar-brand" href="#"><i class="fa fa-calendar-o"></i> Reservation</a>
    <a class="navbar-brand" href="#myReservation"><i class="fa fa-list"></i> MyReservations</a>
    <a class="navbar-brand" href="#about"><i class="fa fa-shield"></i> About</a>
    <a class="navbar-brand" href="#settings"><i class="fa fa-gear"></i> Settings</a>

  </ul>
</div>

Answer 1

将a的font-size属性设置为 0，然后将图标字体大小设置回所需的数量

代码：

@media (max-width:550px) {
  a {
      font-size: 0px !important;
  }

   a i {
      font-size: 20px !important;
   }
}

例如，您需要将屏幕大小调整到 550 像素以下才能产生效果。