Css, Changing Hover Effect of Icon Font in a Link

How to change icons (fontawesome icons) on hover

Use onmouseover and onmouseout events:

<i class="fas fa-times cross" onmouseover="this.className = 'fas fa-times cross'"; onmouseout="this.className='whatever the other class name is'" ></i>

How do I change the color of font awesome icon on hover?

so, I figured out the answer. If I download the icon, it turns into an SVG image, and there's no way to change the color. I have to connect the font awesome kit to my code in order to use the icons properly. Thanks for all your help though.

Change Font Awesome's icon color with hover

Looks like it's because you use inline style. It always has a higher priority. Also you're trying to change style on hover of an <i> tag, but you should do this with an <a>

Take a look:

a {  display: block;}
.test1 {  color: red;}
.test1:hover {  color: #57cdf7;}
.test2 .fa-facebook:hover {  color: #57cdf7;}
.test3 .fa-facebook:hover {  color: #57cdf7;}

<a href="#" class="test1">  <i class="fa fa-vimeo fa-2x">facebook</i></a><a href="#" class="test2">  <i class="fa fa-facebook fa-2x">facebook</i></a><a href="#" class="test3">  <i class="fa fa-facebook fa-2x" style="color:green">facebook</i></a>

Font Awesome Icons Hover effect not working

The issue comes from the fact that inline CSS styles always take precedence over external CSS styles.

One easy workaround would be to add !important after the property you want to override inside your CSS:

.test:hover {  color: blue !important;}

<span class="test" style="color: red;">Lorem Ipsum</span

Change color when hover a font awesome icon?

if you want to change only the colour of the flag on hover use this:

http://jsfiddle.net/uvamhedx/

.fa-flag:hover {    color: red;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-flag fa-3x"></i>

---

Related Topics