How to hide Font-Awesome icons using CSS - html

Question

I cannot seem to successfully use display: none !important; nor visibility: hidden; to hide the menu bars and close icons on a desktop. I have tried applying the code to other objects on my website as well (like the hero button) but it also didn't work on that.
You will however see the below code is only applied to the class for the close icon fa fa-times
HTML code:
<!--homepage header -->
<section class="header">
<nav>
<a href="index.html"> <!--add logo-->
<img src="" alt=""><!--add links-->
</a>
<div class="nav-links">
<div class="close-icon">
<!--menu close icon-->
<i class="fas fa-times"></i>
</div>
<ul>
<li>HOME</li><!--add links-->
<li>ABOUT</li><!--add links-->
<li>SOFTWARE</li><!--add links-->
<li>BLOG</li><!--add links-->
<li>CONTACT</li><!--add links-->
</ul>
</div>
<div class="menu-bars">
<!--menu icon-->
<i class="fas fa-bars"></i>
</div>
</nav>
CSS Code
#import url("https://kit.fontawesome.com/d68c6a086c.js")
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
/* change image below */
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/ft-870l-500x500.jpg);
background-position: center;
background-size: cover;
position: relative;
}
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
/* nav bar comapny logo*/
nav img{
width: 150px;
}
.nav-links{
flex: 1;
text-align: right;
}
/* list style */
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
/* each link */
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 100%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
/* Hide Menu Items for Desktop */
.close-icon {
display: none !important;
visibility: hidden;
}
#media (max-width: 700px) {
.text-box h1{
font-size: 20px;
}
.nav-links ul li {
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: 0;
text-align: left;
z-index: 2;
}
.close-icon {
display: block;
color: #fff;
margins: 10px;
font-size: 22px;
cursor: pointer;
}
}
```

Answer 1

Please try
nav {
display: none;
/*padding: 2% 6%;
justify-content: space-between;
align-items: center;*/
}
#media (max-width: 700px) {
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
}
In head section where you added CSS file add
src="folder/stye.css?v=1.1"
Change v=1.1 to 1.2 or 1.3.1 etc.. whenever you make changes in CSS file.