Question

188

rated 0 times [ 190] [ 2] / answers: 1 / hits: 47054 / 11 Years ago, mon, october 21, 2013, 12:00:00

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.

Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 91

Total Questions: 94

Total Answers: 119

Location: Vanuatu

Member since Wed, Oct 14, 2020

4 Years ago

answered 11 Years ago stefanicarolinat · Accepted Answer

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;

}