Iconfont display and hover - html

Question

I have five links at the bottom of my page. Next to each link is an <i></i> with a Font Awesome heart icon class attribute. I am trying to have the icons not be displayed until the links are hovered over. I have a few questions/issues:
1) Display: hidden would not work on the icons. Is that normal? Visibility: hidden did make them disappear, but as with the visibility property, it did not remove them from the document flow.
2) I could not get the icons to reappear when hovering over the links. The only way I could get them to reappear on hover is by using:
.main-nav__link-container:hover .main-nav__link__icon {
visibility: initial;
}
The problem with the above CSS is that the entire div being hovered over will show the heart, which means I can hover over an area that is not a link (the area where the icon is), and the icon will pop up, but not be clickable. I only want the icon to show up when the actual link is hovered over. Any idea how to do this?
Codepen with full html/css (code associated with question is at the bottom of both the html and css). I have commented out visibility: hidden for the icons so that you can see where they are:
https://codepen.io/pmc222/pen/jvJRyg
HTML
/* Styles link flex items */
.main-nav__link {
text-decoration: none;
color: rgb(0, 0, 0);
font-family: "Montserrat", sans-serif;
font-size: 0.9rem;
letter-spacing: 0.2em;
padding-bottom: 5px;
text-transform: uppercase;
}
/* Styles icon font next to nav links */
.main-nav__link__icon {
display: none;
font-size: 0.9em;
color: rgba(0, 0, 0, 0.6);
margin-right: 3px;
visibility: hidden;
}
*unsure what selector to put here* .main-nav__link__icon {
visibility: initial;
}
/* Adds underline to links on mouse over */
.main-nav__link:hover {
border-bottom: 2px solid rgb(42, 136, 212);
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"/>
<footer id="main-footer">
<nav id="main-nav">
<div class="main-nav__link-container">
<i class="fas fa-heart main-nav__link__icon"></i>
<a class="main-nav__link" href="wedding-party.html">Wedding Party</a>
</div>
<div class="main-nav__link-container">
<i class="fas fa-heart main-nav__link__icon"></i>
<a class="main-nav__link" href="venue-information.html">Venue Information</a>
</div>
<div class="main-nav__link-container">
<i class="fas fa-heart main-nav__link__icon"></i>
<a class="main-nav__link" href="accommodations.html">Accommodations</a>
</div>
<div class="main-nav__link-container">
<i class="fas fa-heart main-nav__link__icon"></i>
<a class="main-nav__link" href="event-information.html">Event Information</a>
</div>
<div class="main-nav__link-container">
<i class="fas fa-heart main-nav__link__icon"></i>
<a class="main-nav__link" href="registry.html">Registry</a>
</div>
</nav>
</footer>

Answer 1

From looking at the code, the issue is that you are trying to display and hide the icons using the link class (which comes after the fa icon), whereas if you targeted the container which holds both the heart and the link, the show/hide would be successful.
If you set the visibility to hidden in your __link__icon class and then display it on hover like so:
.main-nav__link-container:hover .main-nav__link__icon {
visibility:visible;
}
it should display.
Fiddle

Answer 2

You should use display:none and display:block CSS rules instead display:hidden.
Some like this:
.main-nav__link {
display:none;
}
.main-nav__link: hover {
display:block;
}