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

【问题标题】：How do I hide text but keep icons on a small screen?如何隐藏文本但将图标保留在小屏幕上？
【发布时间】：2016-01-25 21:32:58
【问题描述】：

当屏幕变小时，我想隐藏 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>

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议您通过 Google 或通过搜索 SO 进行一些额外的研究，然后尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

标签： html css angularjs angular-ui-bootstrap

【解决方案1】：

使用 hidden-sm hidden-xs 类的引导程序，您可以轻松实现这一目标。

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

【讨论】：

【解决方案2】：

您需要将这些单词包装在一个跨度中并给它们一个像这样的类：

<a class="navbar-brand visible-lg" href="/landingIndex.html"><i class="fa fa-home"></i><span class="link-title">Home</span></a>
<a class="navbar-brand" href="#"><i class="fa fa-calendar-o"></i> <span class="link-title">Reservation</span></a>
<a class="navbar-brand" href="#myReservation"><i class="fa fa-list"></i><span class="link-title">My Reservations</span></a>
<a class="navbar-brand" href="#about"><i class="fa fa-shield"></i> <span class="link-title">About</span></a>
<a class="navbar-brand" href="#settings"><i class="fa fa-gear"></i> <span class="link-title">Settings</span></a>

然后，使用 CSS 媒体查询，隐藏具有指定类的元素（本例中为“link-title”）：

@media all and (max-width: 600px) {
    .link-title {
        display: none;
    }
}

【讨论】：

【解决方案3】：

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

代码：

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

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

example您需要将屏幕大小调整到 550px 以下才能产生效果。

【讨论】：