css - font awesome animated spinner through background

Question

Welcome To Ask or Share your Answers For Others

css - font awesome animated spinner through background

asked Oct 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - font awesome animated spinner through background

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>

question from:https://stackoverflow.com/questions/34210417/font-awesome-animated-spinner-through-background

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T04:17:21+0000

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>

Categories

css - font awesome animated spinner through background

css - font awesome animated spinner through background

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags