display:none not impacting on navigation bar - html

Question

I'm trying to use media queries to change the text links in a navbar to icon font characters on smaller screens utilising display:none but it's not working as I'm currently using it.
I'm also using Font Awesome's icon fonts using the classes fa fa-home etc
.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>
Viewing as:
Full size screen
With media query size screen
Thank you!

Answer 1

Add one more condition
.secondnav.fa{ display:none}
#media only screen and (max-width: 630px) {
.secondnav.fa {
display: inline;
}
}
Because font-awesome icons are display:inline-block by default so you have to overwrite them as you are using them directly with your p tags .secondnav class.
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>

Answer 2

Have you tried to use inline-block?

Answer 3

Your code works fine. You can see it here. Play with the vertical handler. And you'll see it works.
Note : Have you tried clearing your browser's cache?