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'>
Advertisements
Advertisements