HTML CSS Exercise: Use font awesome vector icons with bootstrap3

Last update on March 04 2024 06:50:46 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!doctype html>
<html>
<head>
<title>HTML CSS Exercise - Use Font Awesome Vector Icons with Bootstrap 3</title><!-- Set the title of the HTML page -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"><!-- Link to Bootstrap CSS file -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"><!-- Link to Font Awesome CSS file -->
</head>
<body>
<div class="container"><!-- Create a container div for content -->
<div class="row"><!-- Create a row div within the container -->
<div class="col-md-4"><!-- Create a column div within the row, spanning 4 columns on medium-sized screens -->
<div class="btn-group open"><!-- Create a button group with a dropdown menu -->
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a><!-- Primary button with a user icon -->
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><!-- Button to toggle dropdown menu -->
<span class="fa fa-caret-down"></span></a><!-- Caret down icon indicating dropdown functionality -->
<ul class="dropdown-menu"><!-- Dropdown menu -->
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li><!-- Dropdown item for editing with a pencil icon -->
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li><!-- Dropdown item for deleting with a trash icon -->
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li><!-- Dropdown item for banning with a ban icon -->
<li class="divider"></li><!-- Divider between menu items -->
<li><a href="#"><i class="i"></i> Make admin</a></li><!-- Dropdown item for making admin with an unknown icon (placeholder) -->
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

Explanation:

This HTML code demonstrates the usage of Font Awesome vector icons with Bootstrap 3.
Bootstrap and Font Awesome are linked in the head section of the HTML document using link tags, allowing the use of their styles and icons.
The page structure includes a container div, row div, and column div using Bootstrap's grid system to layout the content.
Within the column div, a button group with a dropdown menu is created.
Buttons and dropdown items are styled using Bootstrap classes like "btn", "btn-primary", and "dropdown-menu".
Font Awesome icons are added using the <i> element with appropriate class names such as "fa fa-user" for the user icon and "fa fa-caret-down" for the dropdown indicator.
Each dropdown item is represented by an anchor tag <a> with an icon and text.
The use of Font Awesome icons enhances the visual appearance and functionality of the buttons and dropdown menu.

Live Demo :

See the Pen use-font-awesome-vector-icons-with-bootstrap3-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes