Hello Guys! Thanks For Visiting EasyTrks . Today I Will Show You How To Use Font Awesome Icons On Your Site.
So Let's Start.
First Go To Your Website Edit Mode & Search For The Code </head> . Then Paste The Code Before </head> .
To use the Font Awesome icons, add the following line inside the
<head> section of your HTML page:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Note: No downloading or installation is required!
You place Font Awesome icons by using the prefix
fa and the icon's name.Example :
<!DOCTYPE html>
<html>
<head>
<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-car"></i>
<i class="fa fa-car"style="font-size:48px;"></i>
<i class="fa fa-car"style="font-size:60px;color:red;"></i>
</body>
</html>
The Result Will Be Like This :
Font Awesome is designed to be used with inline elements. The
<i> and <span> elements are widely used for icons.
Also note that if you change the font-size or color of the icon's container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS.
Larger Icons
The
fa-lg (33% increase), fa-2x, fa-3x,fa-4x, or fa-5x classes are used to increase the icon sizes relative to their containerExample
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
The Result Will Be :
List Icons
The
fa-ul and fa-li classes are used to replace default bullets in unordered lists.Example
The following code:<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>
The Result Will Be :
- List icons
- List icons
- List icons
Animated Icons
The
fa-spin class gets any icon to rotate, and the fa-pulse class gets any icon to rotate with 8 steps.Example
The following code:<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
The Result Will Be Like :
Stacked Icons
To stack multiple icons, use the
fa-stackclass on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon.
The
fa-inverse class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control the sizing.Example
The following code:<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"style="color:red;"></i>
</span>
fa-ban on fa-camera
The Result Will Be Like :
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
So Guys Hope You All Understand Font Awesome Today. Comment Below What You want In The Next Post......
Special Thanks To
w3school.,
