How to Change Icon Colors and Background Colors on Hover

Hyperlinks are the most fundamental building blocks of the web. They are the elements that people interact with the most. 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. When designing icon links we need to make it obvious they are clickable. Using hover effects to change the icon and background color is a good way to indicate they are clickable.

In this tutorial, we're using FontAwesome icons. Icon fonts are ideal to work with when you want to change the link colors easily. All you have to do is change their color property in your CSS file. If you're using SVG instead of FontAwesome, you can change the color easily with the fill property. 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. This is why links using icon fonts and SVG images are much more practical:

Since we're not using any a tags for the links and instead relying on Javascript's onclick function, we also need to indicate links by changing the cursor. This is especially important for color-blind users as they can't distinguish colors, they need other indicators for links. We need to set the cursor to pointer so that when users hover over the link, the cursor will change from an arrow to a hand, making it clear the element is clickable.

External Links

Let's start by including the necessary Bootstrap and FontAwesome source links in the HTML file:

HTML

Below we have the code for a Bootstrap container box with three links. Replace the # in the onclick attribute with the link address you want to put. Copy and paste the code below and feel free to customize the layout and the number of links as you need:

Notice that we have an icon and a descriptive heading with an h3 tag under the icon for each link. This is because icons by themselves may not be descriptive enough for the users so we also provide text to make it clear what the link is about. According to the Nielsen Norman group, icons need a text label to clarify their meaning. 

CSS

Here's the complete CSS code. We have a div with a classname of .ct-icon-boxes that contains all the icon boxes. Each icon box in a div with a .ct-icon-box classname. We don't have to select the icons and the headers separately to set their colors. We simply select the .ct-icon-box element and when we give it a color value, it will set both the icon and the heading color to that value:

And here's our finished icon links. Hover over the icon boxes to see the hover effect: