Searching....
Search Results
Font Awesome Gear (Fa Fa Settings, Tool,Configuration)
Learn how to use Font Awesome gear icons. In this article, you will find out how to add gear icons in different versions, using the classes fa fa-gear and fa-solid fa-gear. You will also see some examples of how to customize the size, color, and rotation of the icons. Whether you need a gear icon for settings, options, preferences, or mechanics, this Font Awesome gear icon is also known as fa-Gear, tool, engine.
Fontawesome Version 4.X
gear
<i class='fa fa-gear'></i> gear
<i class='fa fa-gear' style='color: white'></i> gear
<i class='fa fa-gear' style='color: red'></i> gear
<i class='fa fa-gear' style='color: blue'></i> gear
<i class='fa fa-gear' style='color: #f3da35'></i> Fontawesome Version 6.X
gear
Web
<i class='fa-solid fa-gear'></i> React
<FontAwesomeIcon icon="fa-solid fa-gear" /> Vue
<font-awesome-icon icon="fa-solid fa-gear" /> gear
Web
<i class='fa-solid fa-gear' style='color: white'></i> React
<FontAwesomeIcon icon="fa-solid fa-gear" style={{color: 'white'}} /> Vue
<font-awesome-icon icon="fa-solid fa-gear" :style="{color: 'white'}" /> gear
Web
<i class='fa-solid fa-gear' style='color: red'></i> React
<FontAwesomeIcon icon="fa-solid fa-gear" style={{color: 'red'}} /> Vue
<font-awesome-icon icon="fa-solid fa-gear" :style="{color: 'red'}" /> gear
Web
<i class='fa-solid fa-gear' style='color: blue'></i> React
<FontAwesomeIcon icon="fa-solid fa-gear" style={{color: 'blue'}} /> Vue
<font-awesome-icon icon="fa-solid fa-gear" :style="{color: 'blue'}" /> gear
Web
<i class='fa-solid fa-gear' style='color: #f3da35'></i> React
<FontAwesomeIcon icon="fa-solid fa-gear" style={{color: '#f3da35'}} /> Vue
<font-awesome-icon icon="fa-solid fa-gear" :style="{color: '#f3da35'}" /> How to add Font Awesome gear Icon ?
Font Awesome Icon fa fa gear 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 gear
<!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-gear'></i>
</body>
</html> Tags
accessory,apparatus,harness,instrument,kit,luggage,machinery,material,paraphernalia,stuff,supply,accouterment,adjunct,appurtenance,baggage,belongings,contraption,effects,fittings,habiliment,impedimenta,materiel,means,outfit,possessions,rigging,settings,tool,prefreences,configuration,equipment,accessories, options,engine
Change Font Awesome Icon Gear 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-gear blue-color'></i>
<i class='fa fa-gear green-color'></i>
<i class='fa fa-gear teal-color'></i>
<i class='fa fa-gear yellow-color'></i>
<i class='fa fa-gear red-color'></i>
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