Remove underline only from anchor element child

I had the same issue and fixed this using the following css rule:

a:-webkit-any-link {text-decoration:none}

hope it helps!

Try following css,

a:hover i{
    display: inline-block; <-- this is the trick
    text-decoration:none !important;
}

Demo

Set the display property of i to inline-block:

a i {
    ...
    display: inline-block;
}

JSFiddle

Related