FontAwesome + Load icon animtion

Font Awesome iconset implementation. + icon set rotare css animation;

by John Doe

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<a class="text" >hover over me to spining<i class="fa fa-sort-desc"></i></a>
<a class="fa fa-spinner"></a>

CSS

html, body{
    text-align:center;
    margin-top:20px;
    background-color: #F6F6F6;
}
.text{
    display: block;
    margin:0 auto;
    margin-top:-00px;
    margin-bottom:70px;
    text-decoration:none;
    color:#6F757C;
    font-family:arial;
    font-size:12px;
    background-color:#F6F6F6;
    width:200px;
    height:30px;
    line-height:30px;
    -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
    transition: color 1s;
    cursor:pointer;
    border:1px solid #C0C0C0;
}
.text:hover{
    color:#4679BD;
}
.fa{
    font-size: 41px;
    text-decoration:none;
    color:#C0C0C0;
}
.fa-sort-desc{
    font-size: 20px;
    margin-left: 10px;
    -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
    transition: color 1s;
    color:
}
.text:hover .fa-sort-desc{
    color:#4679BD;
}
.text:hover ~ .fa-spinner{
        -webkit-animation: spin 1300ms infinite linear;
    -moz-animation: spin 1300ms infinite linear;
    -ms-animation: spin 1300ms infinite linear;
    -o-animation: spin 1300ms infinite linear;
    animation: spin 1300ms infinite linear;
}

@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes spin {
    to { -o-transform: rotate(360deg); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}