CODEWITHSUNDEEP
javascripthtmlcssfont-awesome
BaconJuice
BaconJuice

Reputation: 3769

Is it possible to change between two fontawesome icons on hover?

I have an anchor tag with a font-awesome icon as follows

<a href="#" class="lock"><i class="icon-unlock"></i></a>

Is it possible to change to icon on hover to a different icon?

my CSS

.lock:hover{color:red}

Aside from the icon turning red I'd also like to change the icon to the following

<i class="icon-lock"></i>

Is this possible without the help of JavaScript? Or do I need Javascript/Jquery on hover for this?

Thank you.

Upvotes: 43

Views: 54692

Answers (6)

Anas Bouhtouch
Anas Bouhtouch

Reputation: 546

In my templates I often use FontAwesome and I came up with this CSS trick

* > .fa-hover-show,
*:hover > .fa-hover-hidden {
  display: none;
}
*:hover > .fa-hover-show {
  display: inline-block;
}

Add both icons to the HTML; the default icon should have the fa-hover-hidden class while the hover icon one should have fa-hover-show.

<a href="#">
  <i class="fa fa-lock fa-hover-hidden"></i>
  <i class="fa fa-lock-open fa-hover-show"></i>
  <span class="fa-hover-hidden">Locked</span>
  <span class="fa-hover-show">Unlocked</span>
</a>

Given that the icon has a hover effect, it is likely that it is inside a button or link, in which case, a proper solution would be to also react to the change on :focus as well.

* > .fa-hover-show,
*:hover > .fa-hover-hidden,
*:focus > .fa-hover-hidden {
  display: none;
}
*:focus > .fa-hover-show,
*:hover > .fa-hover-show {
  display: inline-block;
}

Upvotes: 9

Diana
Diana

Reputation: 328

You can use pure CSS:

ul#menu i.fa-envelope:hover:before {content: "\f2b6";}

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

You could toggle which one's shown on hover:

HTML: 
<a href="#" class="lock">
    <i class="icon-unlock"></i>
    <i class="icon-lock"></i>
</a>
CSS: 
.lock:hover .icon-unlock,
.lock .icon-lock {
    display: none;
}
.lock:hover .icon-lock {
    display: inline;
}

Or, you could change the content of the icon-unlock class:

.lock:hover .icon-unlock:before {
    content: "\f023";
}

Upvotes: 92

Aakash Goel
Aakash Goel

Reputation: 1179

If you are using SCSS, you could simply do this. Much lightweight than any of the JS solutions and lighter on the DOM.

.icon-unlock:hover {
  @extend .icon-lock;
}

Upvotes: 8

Avitus
Avitus

Reputation: 15958

In jquery it would just be:

$(document).ready(function () {
        $('.icon-unlock').hover(function () {
            $(this).addClass('icon-lock');
            $(this).removeClass('icon-unlock'); 
        }, function () {
            $(this).addClass('icon-unlock');
            $(this).removeClass('icon-lock');
        });


    });

Here is a working jsfiddle of this.

If you are using jquery ui then you can use .switchClass.

An example of this would be:

$(document).ready(function() {
   $(".icon-unlock").switchClass("icon-unlock", "icon-lock");
});

The api on .switchClass() is located here

Upvotes: 0

Mohinder Singh
Mohinder Singh

Reputation: 1830

Simple way open css file of font awesome and change icon code on hover...

for example below is the code for lock icon

content: "\f023";

and here below is the code for unlock icon in css which you can put under :hover

.icon-unlock:before {
  content: "\f09c";
}

Upvotes: 4

Related Questions