Font Awesome is designed to be used with inline elements (like the <i> tag for exact usage, but using a <span> is more semantically correct).
Hence, font awesome is designed to be used with inline elements.
And the <i> and <span> elements are widely used for icons.
To reference an icon, you need to specify in a css class in an inline element:
i. the style prefix (eg: fa, fas, fab, far, fal etc).
ii. and the icons name, prefixed with 'fa-'.
Note: the fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
Note2: by default font awesome-based dom elements are replaced with new <svg> elements.
You can place font awesome icons almost anywhere by using a style prefix (eg: fa, fas, fal etc.. ) and the icon's name.
Eg: using a font awesome icon in different ways:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%-- <link href="Content/bootstrap.min.css" rel="stylesheet" /> --%>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<%-- <script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script> --%>
</head>
<body>
<div>
<span class="fa fa-camera"></span>
<i class="fa fa-camera"></i>
<button>
<span class="fa fa-camera"></span>
Press Me
</button>
<button>
<i class="fa fa-camera"></i>
Press Me2
</button>
<a href="#">
<i class="fa fa-camera"></i>
a link
</a>
<button>
<i class="fa fa-camera" style="color:red;font-size:50px;"></i>
Press Me2
</button>
</div>
</body>
Outputs:
1. Increase icon size (fa-Nx):
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
Eg: increasing size of icon:
<div>
<i class="fa fa-camera"></i>
<i class="fa fa-camera fa-lg"></i>
<i class="fa fa-camera fa-4x"></i>
<button>
<i class="fa fa-camera"></i>
Press Me
</button>
<button>
<i class="fa fa-camera fa-lg"></i>
Press Me
</button>
<button>
<i class="fa fa-camera fa-4x"></i>
Press Me
</button>
</div>
Outputs:
2. Rotate and flip icon (fa-rotate-xxx, fa-flip-xxx):
To rotate and flip icons, use the fa-rotate-90[180,270] or fa-flip-horizontal[vertical] classes:
Eg: to rotate or flip an icon:
<div>
<i class="fa fa-camera fa-rotate-90"></i>
<button>
<i class="fa fa-camera fa-flip-vertical"></i>
Press Me
</button>
</div>
Outputs:
3. Bordered and pulled icons (fa-border, fa-pull-right, fa-pull-left):
Use fa-border and fa-pull-right or fa-pull-left.
Eg: add border to your icon and pulling icon left or right:
<div>
<i class="fa fa-camera fa-border fa-2x"></i>
<button>
<i class="fa fa-camera fa-pull-right"></i>
Press Me
</button>
<button>
<i class="fa fa-camera fa-pull-left"></i>
Press Me
</button>
</div>
Outputs:
4. Animated icons (fa-spin):
Use the fa-spin class to get any icon to rotate.
Use fa-pulse to have it rotate with 8 steps.
Works well with fa-spinner, fa-refresh, and fa-cog.
Eg: using fa-cog icon and fa-spinner:
<div>
<i class="fa fa-cog fa-spin"></i>
<button>
<i class="fa fa-refresh fa-spin fa-pull-right"></i>
Press Me
</button>
<button>
<i class="fa fa-camera fa-pulse"></i>
Press Me
</button>
</div>
Outputs:
5. Fixed width icons:
Use fa-fw to set icons at a fixed width.
Use when different i-fcon widths throw off alignment.
Especially useful in things like nav lists and list groups.
Eg: fixed width icons:
<div>
<div><i class="fa fa-address-book fa-2x fa-fw"></i> Book</div>
<div><i class="fa fa-bug fa-2x fa-fw"></i> Bub</div>
<div><i class="fa fa-camera fa-2x fa-fw"></i> Camera</div>
<div><i class="fa fa-paperclip fa-2x fa-fw"></i> Clip</div>
</div>
Outputs:
6. List icons (fa-ul and fa-li):
Use fa-ul and fa-li to easily replace default bullets in unordered lists.
Eg: unordered list with icons instead of bullets:
<div>
<ul class="fa-ul">
<li><i class="fa fa-li fa-check-square"></i>List icons</li>
<li><i class="fa fa-li fa-times"></i>can be used</li>
<li><i class="fa fa-li fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa fa-li fa-camera"></i>in lists</li>
</ul>
</div>
Outputs:
7. Stacking multiple icons over each other, and icon inverse (fa-stack, fa-stack-2x, fa-stack-1x and fa-inverse):
To stack multiple icons,
a. use the fa-stack class on the parent
b. fa-stack-2x for the larger icon
c. and the fa-stack-1x for the regularly sized icon,
fa-inverse can be used as an alternative icon color.
You can even throw larger icon classes on the parent to get further control of sizing.
Eg: stacking multiple icons over each other:
<div>
<span class="fa-stack fa-lg">
<i class="fa fa-ban fa-stack-2x text-danger"></i> <!-- using bootstrap here for red color -->
<i class="fa fa-camera fa-stack-1x"></i>
</span>
<span class="fa-stack" style="font-size:60px;">
<i class="fa fa-ban fa-stack-2x" style="color:red;"></i>
<i class="fa fa-camera fa-stack-1x"></i>
</span>
<span class="fa-stack" style="font-size:40px;">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-camera fa-stack-1x fa-inverse"></i>
</span>
</div>
Outputs:
For more information, see here.
And here (v4).
