BootStrap4 Icons

♦ BootStrap4 Icons

♣ About BootStrap4 Icons

Icons are the small image which is typically used to represent logo.
BootStrap4 does not have an in-built library for the icon, but third party icons can be easily embedded.
There is no need of installation, direct CDN inclusion will be sufficient for displaying basic and free icons.
Below are some popular icon CDNs.

♣ Example1: Font Awesome in BootStrap4

In this example, Font Awesome Icons are illustrated.

Example

Input:

<!DOCTYPE html>
<html>
<head>
	<title>BootStrap4 Icons</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<style>
	*{
margin: 0;
}

</style>
<body>

<i><h2>BootStrap4 Icons</h2> </i>
<br><br>

<div class="container">
Cloud:<i class="fas fa-cloud"></i><br>
Coffee:<i class="fas fa-coffee"></i><br>
File:<i class="fas fa-file"></i><br>
Car:<i class="fas fa-car"></i><br>
Heart:<i class="fas fa-heart"></i><br>
Bars:<i class="fas fa-bars"></i><br>
</div>

</body>
</html>

Output:

Prev_Lesson Next_Lesson