Search code examples
javascripthtmlhoverfont-awesomeonmouseover

Trigger a HTML-class with external javascript file



I'm using these icons on my webpage: http://fontawesome.io/examples/
One preset class they use for their icons is fa-spin, and it will make the icon spin (du-uh).
I want to make the icons spin whenever they're hovered. A snippet of my HTML(The class "fa fa-envelope" triggers the icon itself):

<a href="http://google.com" class="navbar-item">                
    <span class="icon">
        <i id="wantspin" class="fa fa-envelope fa-spin" onmouseover="dothis()"></i>
    </span>
</a>


Gotta make the fa-spin-class trigger somehow by the function onmouseover, right?

Here's my javascript code, I know that I haven't done anything yet, other than linking the id of the <i> with the variable x, but I'm kinda lost.

function dothis() 
{
var x = document.getElementById ("wantspin")
}


I hope it makes sense, and you get the question. I appreciate any help, insight, tips and tricks, thanks.

Solution

  • You can grab the fa-spin rule from font awesome's stylesheet and add a :hover selector:

    .spin:hover {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear
}
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="http://google.com" class="navbar-item">
    <span class="icon">
        <i class="fa fa-envelope spin"></i>
    </span>
</a>