Rotate only the Border using CSS [duplicate]

This question is an exact duplicate of:

• CSS Animated Circles - Stop center content from rotating 1 answer

I'm trying to rotate only the border using css but the font-icon is also rotating. How do I stop the rotation of the icon and make only the border?

CSS:

.circle {
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 50%;
    border: 2px dashed #000;
 -webkit-animation-name: Rotate;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -moz-animation-name: Rotate;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: linear;
 -ms-animation-name: Rotate;
 -ms-animation-duration: 2s;
 -ms-animation-iteration-count: infinite;
 -ms-animation-timing-function: linear;
}
.play {
padding: 20px 30px;
font-size: 56px;
}

@-webkit-keyframes Rotate
{
 from{-webkit-transform:rotate(0deg);}
 to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes Rotate
{
 from{-moz-transform:rotate(0deg);}
 to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes Rotate
{
 from{-ms-transform:rotate(0deg);}
 to{-ms-transform:rotate(360deg);}
}

HTML:

<div class="circle">
   <div class="play"><i class="fa fa-play"></i></div>
</div>

Where am I going wrong with this code?

DEMO JSFIDDEL