Building Lists with Font Awesome and Bootstrap
In this tutorial, Solodev will show some common implementations for you to build lists using Font Awesome and Bootstrap in your next web design project. Lists are prominent and diverse. One website may need to list their products using visuals while another lists their feature set using checkmarks.
Some applications use checkboxes so the user can mark off what they have completed and what is left to be done. Font Awesome can accommodate any kind of list that needs to be built for your website. In this tutorial, Solodev will show some common implementations of using Font Awesome and Bootstrap to build lists.
Below is the HTML, CSS, and JavaScript required.
device-type.html
Paste the HTML below into your file.
<div class="list-group">
<a href="#" class="list-group-item active">
Device Type
</a>
<a href="#" class="list-group-item"><i class="fa fa-check" aria-hidden="true"></i>
Desktop</a>
<a href="#" class="list-group-item"><i class="fa fa-check" aria-hidden="true"></i>
Mobile</a>
<a href="#" class="list-group-item"><i class="fa fa-check" aria-hidden="true"></i>
Tablet</a>
</div>Note: Below is the result of the code above.
operating-system.html
Paste the HTML below into your file.
<div class="list-group">
<a href="#" class="list-group-item active">
Operating System
</a>
<a href="#" class="list-group-item"><i class="fa fa-check-circle" aria-hidden="true"></i>
Windows</a>
<a href="#" class="list-group-item"><i class="fa fa-check-circle" aria-hidden="true"></i>
OS X</a>
<a href="#" class="list-group-item"><i class="fa fa-check-circle" aria-hidden="true"></i>
Linux</a>
</div>Note: Below is the result of the code above.
features.html
Paste the HTML below into your file.
<div class="list-group">
<a href="#" class="list-group-item active">
Features
</a>
<a href="#" class="list-group-item"><i class="fa fa-check-square" aria-hidden="true"></i>
CRM - Sales Cloud</a>
<a href="#" class="list-group-item"><i class="fa fa-check-square" aria-hidden="true"></i>
E-Commerce</a>
<a href="#" class="list-group-item"><i class="fa fa-check-square" aria-hidden="true"></i>
CMS - Website Builder</a>
</div>Note: Below is the result of the code above.
to-do.html
Paste the HTML below into your file.
<div class="list-group">
<a href="#" class="list-group-item active">
To-Do List
</a>
<a href="#" class="list-group-item"><i class="fa fa-check-square-o" aria-hidden="true"></i>
Go Christmas Shopping</a>
<a href="#" class="list-group-item"><i class="fa fa-check-square-o" aria-hidden="true"></i>
Pick up movie tickets from theatre</a>
<a href="#" class="list-group-item"><i class="fa fa-square-o" aria-hidden="true"></i>
Write Christmas Cards</a>
<a href="#" class="list-group-item"><i class="fa fa-check-square-o" aria-hidden="true"></i>
Pick up Jon from Airport</a>
</div>Note: Below is the result of the code above.
External Resources
Include the following in your web pages to activate Font Awesome and Bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="lists.css">
<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>In this article, Solodev showed how to create lists using Font Awesome Icons and Bootstrap Components. Now you can add your own styles and icons to make your own Font Awesome lists!
Originally posted on the Solodev Web Design Blog
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
