CSS, changing hover effect of icon font in a link
css, font-awesome, hover, icons
Solution
You want to set the color of the `icon` class that is inside a hovered `a` element.
.options-list li a:hover .icon {color: #ae0000;}
Problem
I have a nav element like so... ``` <ul class="options-list"> <li><a href="#"><i class="icon icon-print"></i> Print This</a></li> <li><a href="#"><i class="icon icon-envelope-alt"></i> Send This</a></li> <li><a href="#"><i class="icon icon-bookmark"></i> Bookmark This</a></li> <li><a href="#"><i class="icon icon-star"></i> Favourite This</a></li> <li><a href="#"><i class="icon icon-heart"></i> Like This</a></li> </ul> ``` I am using Font Awesome to generate the icons. The CSS is as follows: ``` .options-list li a { color: #888; display: block; border-bottom: 1px solid #e7e7e7; padding-top: 7px; padding-right: 0; padding-bottom: 7px;} .options-list li:first-child a {margin: -15px 0 0 0;} .options-list li:last-child a {border: none;} .options-list li a:hover {color: #444;} ``` Obviously this gives me a change of text (and icon) colour on hover to #444. Now what I would like to do, is keep that, but have the icon change to a different colour on hover. (i.e text changes to #444, icons changes to #AE0000 on hover) I'm not sure of the best way to tackle it. (Still quite new to CCS/HTML so any help mucho appreciated!) Thanks!