July 19, 20188 yr I have been working on a site which is using Font Awesome icons. I want them to display a different background colour on hover. I have got it to work, but the background colour is bigger than the actual icon, so the background displays around the icon. What I want is for the background to change, but not be bigger than the icon. The issue can be viewed by clicking the link above and hovering over the Facebook and Youtube social media icons. I have been trying to solve this, but with no success. Can anyone help and point me in the right direction?
July 19, 20188 yr It's because that's the size of the icons you have chosen. The white background you see on hover is part of the icon. The instagram one is OK. These are maybe the ones you need: https://fontawesome.com/icons/facebook-square?style=brands https://fontawesome.com/icons/youtube-square?style=brands
July 19, 20188 yr Author Thanks for your reply @fisicx. I changed the icons to use the square set, but the problem is still there. I have added the background using css when it hovers. The instagram icon does not have have a background on it to change. Only the color. That is why that one is working as intended.
July 20, 20188 yr There's no reason to use any icon fonts in this day and age, issues with them are rife, they also make for an accessibility nightmare. What you want to use is SVG. Even as far back as 2014 it was clear that icon fonts should no longer be used: https://css-tricks.com/icon-fonts-vs-svg/
Create an account or sign in to comment