Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. how to insert icons in bootstrap .

Objectives and Outcomes

In this, we will discuss about inserting icons in bootstrap

Font-awesome icons

To use the Font Awesome icons, add the following line inside the head section of your HTML page:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

Check out the following code to insert a font-awesome icon in bootstrap

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>

<p>Some Font Awesome icons:</p>
<i class="fa fa-cloud" style="font-size:48px;color:#585858;"></i>
<i class="fa fa-heart" style="font-size:48px;color:#585858;"></i>
<i class="fa fa-car" style="font-size:48px;color:#585858;"></i>
<i class="fa fa-file" style="font-size:48px;color:#585858;"></i>
<i class="fa fa-bars" style="font-size:48px;color:#585858;"></i>


</body>
</html>


Output

Some Font Awesome icons: