An icon on your computer screen represents an object or a program on your hard drive, in bootstrap icon also represents an action-related page like add, delete, update, cloud, dashboard, etc. For example, the folders you see on your desktop or in open windows are all icons. Icons are actually a visual representation of some things on your computer. For example, a blue 'e' on your screen represents the Internet Explorer program. An icon that appears like a sheet of paper is actually a text document. By clicking and dragging the icons, you can move the actual files to your computer's hard drive in many different locations.
In Bootstrap, we can add several free icon libraries to choose from, such as Font Awesome and Google Material Design Icons or Bootstrap's own font has been given in the new version, if you want, then you can take it or you can take it from the library you want.
To use Font Awesome icons,
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
first of we write the fa class in the class attribute then next add the font name class in the class attribute like (fa-coffee, fa-car, fa-file, etc).
Example
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Bootstrap Example</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' crossorigin='anonymous'></head>
<body>
<div class='container'>
<h1>My Icons <i class='fa fa-heart' style='color:red;'></i></h1>
<p>An icon along with some text: <i class='fa fa-thumbs-up'></i></p>
</div>
<div class='container'>
<i class='fa fa-cloud text-primary '> Cloud</i>
<i class='fa fa-coffee'></i>
<i class='fa fa-car'></i>
<i class='fa fa-file'></i>
<i class='fa fa-bars'></i>
</div>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
</html>
Output
