When the user hovers over an icon font, the color of the icon is supposed to change (preferably to a thematically related color, such as the red color we’ve used for the widget titles or the photo accent border).
To do this takes only a few lines of CSS:
.nav-social a {
color: black; transition: color .5s;
}
.nav-social a:hover {
color: #cd5c5c;
}
The key here is that we put the transition on the non-hover state. This means that the change will occur when the hover occurs and when it ends. Try this out on other interface elements on the page.