Шрифт удивительный анимированный счетчик через фон

Я использую шрифт с удивительным символом вращения через фон CSS для загрузки страницы.

    /* 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="[email protected]*" data-semver="4.5.0" rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css'; return false;" />
  <link rel="stylesheet" href="style.css" />
</head>

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

</html>

Ответ 1

Правильный ответ: обновите CSS, как показано ниже.

    /* Styles go here */
.loading-icon {
  position: relative;
  width: 20px;
  height: 20px; 
  margin:50px auto;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

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

<!DOCTYPE html>
<html>

<head>
  <link data-require="[email protected]*" 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>

Ответ 2

Вы должны использовать fa fa-spinner fa-spin.

Смотрите: Шрифт Awesome Примеры

Пример:

/** CSS **/
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css');

<!-- HTML -->
<div class="fa fa-spinner fa-spin"></div>

Ответ 3

В соответствии с Примеры шрифтов Awesome:

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; return false;" rel="stylesheet"/>

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>