html - display:none 不影响导航栏

Question

我正在尝试使用媒体查询将导航栏中的文本链接更改为使用 display:none 的较小屏幕上的图标字体字符，但它无法正常工作，因为我目前正在使用它。

我还使用类 fa fa-home 等使用 Font Awesome 的图标字体

.firstnav {
  display: inline;
}

.secondnav {
  display: none;
}

@media only screen and (max-width: 630px) {
  .firstnav {
    display: none;
  }
  .secondnav {
    display: inline;
  }
}

<nav class="topnav" id="myTopnav">
  <a href="#home">
    <p class="firstnav">Rob Hern</p>
    <p class="secondnav poppins">RH</p>
  </a>
  <a href="#home">
    <p class="firstnav">Home</p>
    <p class="secondnav fa fa-home"></p>
  </a>
  <a href="#portfolio">
    <p class="firstnav">Portfolio</p>
    <p class="secondnav fa fa-code"></p>
  </a>
  <a href="#contact">
    <p class="firstnav">Contact</p>
    <p class="secondnav fa fa-envelope-o"></p>
  </a>
  <a href="#about">
    <p class="firstnav">About</p>
    <p class="secondnav fa fa-user"></p>
  </a>
</nav>

查看为: Full size screen With media query size screen

谢谢!

Answer 1

再添加一个条件

.secondnav.fa{ display:none}
@media only screen and (max-width: 630px) {
.secondnav.fa {
    display: inline;
  }
}

因为 font-awesome 图标是display:inline-block 默认 所以你必须覆盖它们因为您直接将它们与您的 p tags .secondnav 类一起使用。

Below is a working snippet .

.firstnav {
  display: inline;
}

.secondnav {
  display: none;
}

.secondnav.fa {
  display: none;
}

@media only screen and (max-width: 630px) {
  .firstnav {
    display: none;
  }
  .secondnav {
    display: inline;
  }
  .secondnav.fa {
    display: inline;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="topnav" id="myTopnav">
  <a href="#home">
    <p class="firstnav">Rob Hern</p>
    <p class="secondnav poppins">RH</p>
  </a>
  <a href="#home">
    <p class="firstnav">Home</p>
    <p class="secondnav fa fa-home"></p>
  </a>
  <a href="#portfolio">
    <p class="firstnav">Portfolio</p>
    <p class="secondnav fa fa-code"></p>
  </a>
  <a href="#contact">
    <p class="firstnav">Contact</p>
    <p class="secondnav fa fa-envelope-o"></p>
  </a>
  <a href="#about">
    <p class="firstnav">About</p>
    <p class="secondnav fa fa-user"></p>
  </a>
</nav>