Menu
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.
288
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With