

With PNG and JPEG image files, you need to provide two sets of images with different colors for each icon, one for regular state and one for the hover state. If you're using SVG instead of FontAwesome, you can change the color easily with the fill property. All you have to do is change their color property in your CSS file. Icon fonts are ideal to work with when you want to change the link colors easily.

In this tutorial, we're using FontAwesome icons. Using hover effects to change the icon and background color is a good way to indicate they are clickable. When designing icon links we need to make it obvious they are clickable. In the earlier days of the web, only text and blue color were used to indicate links. In modern web design, we can be more creative when designing links such as using icons but we need to ensure that the usability of the links doesn't suffer. They are the elements that people interact with the most. Hyperlinks are the most fundamental building blocks of the web.
