Searching....
Search Results
Font Awesome Spinner (Spin, Loader, Spinning)
Font Awesome provides is spinner icon,that is use for a circular shape that rotates to indicate loading, processing, or waiting. The spinner icon can be customized with different sizes, colors, and animations. In this tutorial, we will learn how to use Font Awesome spinner icon, also known as fa fa spinner , Turn, Around, Round, Rotate.
Fontawesome Version 4.X
spinner
<i class='fa fa-spinner'></i> spinner
<i class='fa fa-spinner' style='color: white'></i> spinner
<i class='fa fa-spinner' style='color: red'></i> spinner
<i class='fa fa-spinner' style='color: blue'></i> spinner
<i class='fa fa-spinner' style='color: #f3da35'></i> Fontawesome Version 5.X
spinner
<i class='fas fa-spinner'></i> spinner
<i class='fas fa-spinner' style='color: white'></i> spinner
<i class='fas fa-spinner' style='color: red'></i> spinner
<i class='fas fa-spinner' style='color: blue'></i> spinner
<i class='fas fa-spinner' style='color: #f3da35'></i> Fontawesome Version 6.X
spinner
Web
<i class='fa-solid fa-spinner'></i> React
<FontAwesomeIcon icon="fa-solid fa-spinner" /> Vue
<font-awesome-icon icon="fa-solid fa-spinner" /> spinner
Web
<i class='fa-solid fa-spinner' style='color: white'></i> React
<FontAwesomeIcon icon="fa-solid fa-spinner" style={{color: 'white'}} /> Vue
<font-awesome-icon icon="fa-solid fa-spinner" :style="{color: 'white'}" /> spinner
Web
<i class='fa-solid fa-spinner' style='color: red'></i> React
<FontAwesomeIcon icon="fa-solid fa-spinner" style={{color: 'red'}} /> Vue
<font-awesome-icon icon="fa-solid fa-spinner" :style="{color: 'red'}" /> spinner
Web
<i class='fa-solid fa-spinner' style='color: blue'></i> React
<FontAwesomeIcon icon="fa-solid fa-spinner" style={{color: 'blue'}} /> Vue
<font-awesome-icon icon="fa-solid fa-spinner" :style="{color: 'blue'}" /> spinner
Web
<i class='fa-solid fa-spinner' style='color: #f3da35'></i> React
<FontAwesomeIcon icon="fa-solid fa-spinner" style={{color: '#f3da35'}} /> Vue
<font-awesome-icon icon="fa-solid fa-spinner" :style="{color: '#f3da35'}" /> How to add Font Awesome spinner Icon ?
Font Awesome Icon fa fa spinner Icon can be added to any web page simply as below. You can integrate Icon in web pages by just adding following below syntax & icon code.
HTML Code
Get complete html code for icon spinner
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
<i class='fa fa-spinner'></i>
</body>
</html> Tags
spin,loader,spinning,arrow,turn,around,round,rotate
Change Font Awesome Icon Spinner Color
Sometimes we need icons in different color, as we suggested by adding css style we can change color. Here we have created one example to change color of icons with css classes.
<style>
.blue-color {
color:blue;
}
.green-color {
color:green;
}
.teal-color {
color:teal;
}
.yellow-color {
color:yellow;
}
.red-color {
color:red;
}
</style>
<i class='fa fa-spinner blue-color'></i>
<i class='fa fa-spinner green-color'></i>
<i class='fa fa-spinner teal-color'></i>
<i class='fa fa-spinner yellow-color'></i>
<i class='fa fa-spinner red-color'></i>
Output of the above example will be as below- Note- Make Sure You have included the below Font Awesome file in header-
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
Spinner Icon Font Awesome - FAQs
⭐What is the Font Awesome Spinner Icon code?Icon Code is - fa fa-spinner.
⭐ What does the fa fa-spinner Icon mean?fa fa-spinner is the Icon code of Font Awesome Spinner.
⭐ Can we add fa fa-spinner Icon in different sizes?Yes, you can Icon of fa fa-spinner in various pixels.
⭐ How to add a Blue color Font Awesome Spinner Icon?Add the blue color Spinner icon of the font awesome by using code: fa fa-spinner style='color: blue;'.
⭐ How to make white color icon of a Font Awesome Spinner?To change the Spinner icon to white color use code: fa fa-spinner style='color: white;'.
Advertisements
Advertisements