Rotate only the Border using CSS : <p>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?</p>

<p>CSS:</p>

<pre><code>.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);}
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="circle"&gt;
   &lt;div class="play"&gt;&lt;i class="fa fa-play"&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Where am I going wrong with this code?</p>

<p><a href="https://jsfiddle.net/yp7je9n2/" rel="noreferrer">DEMO JSFIDDEL</a></p>
