Kosta021 Kosta021 - 1 year ago 141
CSS Question

Font Awesome Hover Issue

This question is related to http://stackoverflow.com/questions/25770590/change-color-when-hover-a-font-awesome-icon#=

What I'm trying to achieve is the hover style on Circle behind icon.

<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>

.fa-circle:hover {
color: red;


As you can see, when you go over the image, only one part of it will activate the hover effect. I guess this is because other image (flag) is on top if it.. Is there any way I could "avoid" flag icon and make it work?

Answer Source

.fa-circle is a child of .fa-stack, so check for the hover on the parent.

If you only want to target .fa-circle:

.fa-stack:hover .fa-circle{
    color: red;

If you want to target all .fa-stacks:

    color: red;

Or if you create your own class, it won't affect the normal behaviour:

<span class="fa-stack fa-5x hover-change">


.hover-change:hover {
    color: red;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download