Basic Icons To use the Font Awesome icons, add the following line inside the <head> section of your HTML page: <link rel=...
Basic Icons
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
The following code:
<!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>
Results in:<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
Thefa-lg (33% increase), fa-2x, fa-3x,
fa-4x, or fa-5x classes are used to increase the icon sizes relative to their container.Example
The following code:
<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>
Results in:List Icons
Thefa-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>
Results in:- List icons
- List icons
- List icons
Bordered and Pulled Icons
Thefa-border, fa-pull-right or fa-pull-left
classes are used for for pull quotes or article icons.Example
The following code:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
Results in:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
Animated Icons
Thefa-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>
Results in:Rotated and Flipped Icons
Thefa-rotate-* and fa-flip-* classes are used to rotate and flip icons.Example
The following code:
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>
Results in:Stacked Icons
To stack multiple icons, use thefa-stack class 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
Results in:
fa-twitter on fa-circle-thin
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Fixed Width Icons
Thefa-fw class is used to set icons at a fixed width. This class is useful when different icon
widths throw off alignment. Especially useful in Bootstrap's navlists and list groups.Example
<div class="list-group">
<a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
<a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
YORUMLAR