Icons are not visible after hovering a button - html

Question

I'm new at CSS and front-end programming. I want to display two icons next to a button after the button is hovered. But in my code, the icons are not displaying after hover effect. Can you help please ?
#submit-btn {
padding: 15px 50px;
background-color: whitesmoke;
color: #333;
border: none;
font-weight: 700;
transition: background-color .3s;
}
#submit-btn:hover {
background-color: #870F02;
color: whitesmoke;
box-shadow: 10px 10px 8px #62F0AA;
}
.fa-hand-point-right,
.fa-hand-point-left {
display: none;
}
#submit-btn:hover .fa-hand-point-left,
#submit-btn:hover .fa-hand-point-right {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="col-12 mt-5 submit-input d-flex justify-content-center align-items-center">
<i class="fa-solid fa-2xl fa-hand-point-right me-3"></i>
<button id="submit-btn" class="btn" type="submit">PROJEYİ GÖNDER</button>
<i class="fa-solid fa-2xl fa-hand-point-left ms-3"></i>
</div>

Answer 1

You've implemented descendant selectors, but the icons are siblings of the button. Since there are no previous sibling selectors in CSS, you have a few options:
Use a wrapping element as a hover target.
Place the icons inside the button element.
Use JavaScript to enact the hover effect on specific elements.
Here I demonstrate the first option. I'm loading Bootstrap to leverage the d-inline-block class, which makes the div shrink to the size of the elements inside. I've also used opacity instead of display, as display: none removes the elements from the document flow. This can cause ugly shifting of things on hover. Since your button is centered it doesn't, but it easily could if your alignment changed. Also, you can animate opacity to match your button styles.
The drawback to this approach is that the effect occurs when hovering over the hidden icons also. The same would be true for option 2.
#submit-btn {
padding: 15px 50px;
background-color: whitesmoke;
color: #333;
border: none;
font-weight: 700;
transition: background-color .3s;
}
#submit-btn:hover {
background-color: #870F02;
color: whitesmoke;
box-shadow: 10px 10px 8px #62F0AA;
}
.fa-hand-point-right,
.fa-hand-point-left {
opacity: 0;
transition: opacity 0.3s;
}
.hover-target:hover .fa-hand-point-left,
.hover-target:hover .fa-hand-point-right {
opacity: 1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="col-12 mt-5 submit-input d-flex justify-content-center align-items-center">
<div class="d-inline-block hover-target">
<i class="fa-solid fa-2xl fa-hand-point-right me-3"></i>
<button id="submit-btn" class="btn" type="submit">PROJEYİ GÖNDER</button>
<i class="fa-solid fa-2xl fa-hand-point-left ms-3"></i>
</div>
</div>