font awesome animated spinner through background

Question

font awesome animated spinner through background

79k Views Asked by SatAj At 20 October 2024 at 19:48

I am using font awesome spin icon through CSS background for loading the page.

    /* 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>

The icon is rendering successfully in the page, but it is a static. How can I use the animated spinning icon using font awesome as a background? Kindly assist.

Original Q&A

There are 3 best solutions below

Berendschot On 10 December 2015 at 19:53

You should use fa fa-spinner fa-spin.

See: Font Awesome Examples

Example:

/** 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>

Lucas Bustamante On 07 June 2017 at 21:08

Font Awesome 4.7

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-spinner fa-spin fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-fw"></i>
<i class="fa fa-cog fa-spin fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-fw"></i>

Font Awesome 5+

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-stroopwafel fa-spin"></i>

Font Awesome 5 Spinner documentation:

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

Font Awesome 5 Spinner Icon list:

https://fontawesome.com/icons?c=spinners

**SatAj** · Accepted Answer

Correct answer: Update CSS as given below.

    /* 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="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>

font awesome animated spinner through background

There are 3 best solutions below

Font Awesome 4.7

Font Awesome 5+

Related Questions in CSS

Related Questions in FONT-AWESOME-3.2

Trending Questions

Popular # Hahtags

Popular Questions