fuente impresionante spinner animado a través del fondo

Estoy usando el icono de giro de fuente impresionante a través del fondo CSS para cargar la página.

    /* Styles go here */
.loading-icon {
  position: relative;
  width: 20px;
  height: 20px; 
  margin:50px auto;
}

.loading-icon:before {
  content: "\f110";
  font-family: FontAwesome;
  font-size:20px;
  position: absolute;
  top: 0; 
}
<!DOCTYPE html>
<html>

<head>
  <link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="loading-icon"></div>
</body>

</html>

El icono se muestra correctamente en la página, pero es estático. ¿Cómo puedo usar el ícono giratorio animado usando la fuente impresionante como fondo? Ayudar amablemente.

Respuestas a la pregunta(3)

Su respuesta a la pregunta