In this article Solodev will cover using Font Awesome with forms, button groups, as well as resizing icons and changing their colors. In our final example, Solodev will show you how to use Font Awesome to add a loading icon triggered by basic JavaScript.
For detailed instructions, view Solodev's Creative Ways to Use Font Awesome article.
Try out a working example on JSFiddle.
The Font Awesome examples contain the following HTML markup.
<div class="container font-awesome">
<p>Using Font Awesome Icons for a Login Form</p>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Login</h3>
</div>
<div class="panel-body">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2"><i class="fa fa-key" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon2">
</div>
</div>
</div>
</div>
</div>
<hr>
<p>Common Font Awesome Use Cases</p>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2"><i class="fa fa-phone" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" placeholder="Phone #" aria-describedby="basic-addon2">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usd" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" placeholder ="00.00"aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3"><i class="fa fa-globe" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" placeholder="https://www.domain.com"id="basic-url" aria-describedby="basic-addon3">
</div>
<hr>
<p>Using Font Awesome Icons in a Button Group</p>
<div class="btn-group btn-group-lg btn-group-justified" role="group" aria-label="Actions">
<a class="btn btn-default dashboard-shortcut" ><span class="fa fa-list" aria-hidden="true"> List</span></a>
<a class="btn btn-default dashboard-shortcut" ><span class="fa fa-th" aria-hidden="true"> Grid</span></a>
<a class="btn btn-default dashboard-shortcut" ><span class="fa fa-calendar" aria-hidden="true"> Calendar</span></a>
</div>
<br>
<hr>
<p>Resizing Font Awesome Icons</p>
<i class="fa fa-facebook-square fa-large" aria-hidden="true"></i>
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-pinterest-square fa-5x" aria-hidden="true"></i>
<hr>
<p>Changing Font Awesome Icon Colors</p>
<i class="fa fa-users red" aria-hidden="true"></i>
<hr>
<p>
Animated Icons Attached to OnClick Events
</p>
<button class="btn btn-default has-spinner">
<span class="spinner"><i class="fa fa-circle-o-notch fa-spin"></i></span>
Get Started
</button>
<hr>
</div>
All required CSS is in index.css
This tutorial utilizes the following JavaScript.
$( document ).ready(function() {
$(function(){
$('.has-spinner').click(function() {
$(this).toggleClass('active');
});
});
});
This tutorial contains the following third party resources.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>