Icon with rotating border on hover

For example, Icon with rotating border on hover...

Demo

HTML

<div class="icon-rotate-nav"> 
        <a href="#" class="iconRotate fa fa-home"></a>
        <a href="#" class="iconRotate hover fa fa-star-o"></a> 
        <a href="#" class="iconRotate fa fa-folder-o"></a> 
        <a href="#" class="iconRotate fa fa-list-alt"></a> 
        <a href="#" class="iconRotate fa fa-cog"></a>
</div>

CSS

<style>
    .iconRotate { 
            position: relative; 
            font-size: 35px; 
            color: #e6e6e6; 
            width: 65px; 
            margin: 0 3%; 
            height: 65px; 
            line-height: 65px; 
            display: inline-block; 
            text-align: center; 
            -webkit-perspective: 50em; 
            perspective: 50em; 
            text-decoration: none; 
    }
    .iconRotate:after { 
            position: absolute;  
            top: 0; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            border: 2px solid #e6e6e6; 
            content: ''; 
            z-index: -1; 
            border-radius: 50%; 
    } 
    .iconRotate:before { 
            color: #fff; 
    }
    .iconRotate:before,
    .iconRotate:after {
            -webkit-transition: all 0.45s ease-in-out;
            transition: all 0.45s ease-in-out;
    }
    .iconRotate:hover,
    .iconRotate:active,
    .iconRotate.hover { 
            color: #fdd921; 
    }
    .iconRotate:hover:after,
    .iconRotate:active:after,
    .iconRotate.hover:after {
            border-color: #fdd921 transparent #fdd921 transparent;
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    }
    .icon-rotate-nav a { 
            vertical-align:top 
    }
    @media only screen and (max-width : 767px) {
    .icon-rotate-nav { padding:20px 0; }
            .iconRotate { 
                    font-size: 20px; 
                    width:40px; 
                    height:40px; 
                    line-height:40px; 
                    margin:0 2%; 
            }
    }
    
    /* Demo purposes only */
    body { 
            background-color: #212121; 
    }
</style>

Javascript

/* Demo purposes only */
$(".hover").mouseleave(
        function () {
                $(this).removeClass("hover");
        }
);