In my project, I am utilizing Font Awesome SVG with JavaScript multiple times. Currently, I am working on creating a button that displays an arrow icon to the right of the text when hovered over. However, I encountered an issue where there is a blank square instead of the icon appearing in the designated spot.
To address this issue, I used:
display:none
This solution successfully got rid of the empty icon on the right side of the button text. But now, I want to know how I can make the icon appear within the blank square.
The code snippet is as follows:
window.FontAwesomeConfig = {
searchPseudoElements: true
}.fa-arrow-right:before {
font-family: 'Font Awesome 5 Solid';
content: "\f061";
font-weight: 900;
}
.btn-4 {
border-radius: 50px;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
}
.btn-4:active {
border-color: #17954c;
color: #17954c;
}
/* Button styles and animations */
I have captured screenshots to better illustrate the problem: buttons and buttons on hover