i'm aspiring web designer , need issue i'm having. have icon in font awesome want change colour/style when hover on it.
here default style i'd use:
css
.fa-circle { color:red; } html:
<span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i> </span> http://jsfiddle.net/94n0zxbt/2/
and here i'd have change on hover:
http://jsfiddle.net/94n0zxbt/5/
css
.fa-circle { color:white; border-color: red; border-radius: 90px; border-style: solid; } .fa-arrow-right { color: red; } html
<span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i> </span> thanks,
ashley
the reason normal :hover css isn't working <i> tags overlapping each other. if put arrow <i> tag inside circle <i> work:
http://jsfiddle.net/pjpwea/94n0zxbt/6/
you notice arrow has gotten twice big (i assume '2x' class), not super familiar font awesome there easy fix.
