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.
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:before {
content: "\f023";
}
Or, you could change the content
of the icon-unlock
class:
.lock:hover .icon-unlock:before { content: "\\f023"; }
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;
}
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;
}
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";
}
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
您可以使用纯 CSS:
ul#menu i.fa-envelope:hover:before {content: "\f2b6";}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.