Mastering Font Awesome - Bordered & Pulled Icons Sandbox
A sandbox for the "Mastering Font Awesome" Udemy course.
by Jacob Hill
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TEKFused</a>
</div>
<!-- Nav bar -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<!-- Left Nav links -->
<ul class="nav navbar-nav">
<li>
<a href="#" title="Home" class="fa fa-home fa-2x"></a>
</li>
<li>
<a href="#" title="Share" class="fa fa-share-alt fa-2x"></a>
</li>
<li>
<a href="#" title="Search" class="fa fa-search fa-2x"></a>
</li>
</ul>
<!-- Right Nav links -->
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" title="Cart" class="fa fa-shopping-cart fa-2x"></a>
</li>
<li>
<a href="#" title="My Profile" class="fa fa-user-circle fa-2x"></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container" id="content">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<p>
<i class="fa fa-thumbs-up fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
I hope you are enjoying the course and learning a lot!! Feel free to ask questions if you have any issues, and please review the course and give me...
CSS
p {
font-size:24px;
}
body {
padding-top:100px;
}