font awesome animated spinner through background

Question

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.

score 63 · Answer 1 · answered Dec 10 '15 at 19:53

63

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>

answered Dec 10 '15 at 19:53

Berendschot

3,026
1
21
43

2

will work.. But I want to use font-awesome icon as a CSS background as described in my question. – SatAj Dec 10 '15 at 20:57
You could add a layer on top, but it is not possible to set 'text' as a background. – Berendschot Dec 10 '15 at 21:15
1

We can set text as a background through "content" property as I have set in my example. – SatAj Dec 10 '15 at 22:26
I'd go for adding another layer, because that is not the way how you should use the `content` property. Otherwise you'll have to use a `.GIF` image in `:before`. – Berendschot Dec 10 '15 at 22:32

SatAj · Accepted Answer · 2015-12-14T18:03:53.967

39

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>

edited Dec 14 '15 at 18:03

answered Dec 10 '15 at 22:38

SatAj

1,899
4
29
47

1

None of the other answers–including the accepted answer–address the specific needs of the OP which was to leverage css to use the icon as a background image. Thanks for this great solution! – jyoseph Aug 03 '17 at 21:33
1

Depending on your need, you can put the animation CSS in the :before psuedo class. Separating icon and animation into different css blocks is not necessary. – Jonathan Eltgroth Feb 15 '19 at 19:51

Lucas Bustamante · Answer 3 · 2021-02-17T17:19:50.300

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

This doesn't answer the question. All you've done is list ways to spin the icons which you can find on FA's docs page. The OP is asking how to spin an icon when being used with `:before` — j08691, Apr 23 '19 at 15:14

font awesome animated spinner through background

3 Answers3

Font Awesome 4.7

Font Awesome 5+

Linked