Bootstrap 4 Icons
Bootstrap 4 Icons
Bootstrap 3 contains the default icon library. But in bootstrap 4, you have to include the external icon library by yourself. Many free icon libraries are available such as Font Awesome, Google Material Design Icons, and many more. The icons are used to make the webpage more interactive and elegant.
To add icons in a webpage, firstly you need to add an external CSS library (CDN Link). We are using Font Awesome, the link is given below:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
Note: Downloading or installation is not required.
Steps for creating icons
- To create an icon, add .fas class along with the .fa-* class to the <i> element.
Where, * = cloud, file, home, book, etc.
Note: You can change the size and color of the icons by adding CSS color property.
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Icons Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <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> </head> <body> <div class="container"> <h1>My Icons <i class="fas fa-heart"></i></h1> </div> <div class="container"> <p></p> <i class="fas fa-cloud"></i> <i class="fas fa-coffee"></i> <i class="fas fa-car"></i> <i class="fas fa-file"></i> <i class="fas fa-bars"></i> </div> </body> </html>
Output
