I don't understand why "display: none" isn't working properly to make things gone, when i hover the button i want the code that was gone to show, also i wanted it all center independent of the hover being activated or not. What am I missing? I want the image on both sides of the button when hovered and the images not being there when mouse is elsewhere.
.imgDownload {
display: none;
}
#btnDownload:hover + .imgDownload {
display: block;
}
<div class="pt-4" style="text-align: center;" id="btnResume">
<span class="fa fa-arrow-circle-down imgDownload" style="font-size: 26px;"></span>
<button type="button" style="font-size: 20px;" id="btnDownload">Download File</button>
<span class="fa fa-arrow-circle-down imgDownload" style="font-size: 26px;"></span>
</div>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>