How to use awesome fonts in bootstrap5?
April 29, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to use awesome fonts in bootstrap with code example.
BootstrapCDN provides css files without icons. So you can add the ‘Complete Bootstrap css Without glyphicons icons’. This file also combines the Bootstrap css with the Responsive css, so you get only one css file! Then add the Font Awesome css file and you are done. You do not need to mess with the Bootstrap JS files. They have an IE7 compatibility support css file also but this is optional.
Which means you just need to add these css files, and remove the older Bootstrap css files (you have Bootstrap javascripts already installed)
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" rel="stylesheet">So get font awesome and power up Bootstrap even further. Update: You can also add font awesome icons to any site without Bootstrap.
Example
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<a class="btn btn-outline-warning" href="#">
<i class="fa fa-fw fa-edit"></i>
</a>
<br>
<a class="btn btn-outline-danger" href="#">
<i class="fa fa-fw fa-trash"></i>
</a>
<br>
<a class="btn btn-outline-success" href="#">
<i class="fa fa-fw fa-wrench"></i>
</a>
<br>
<a class="btn btn-outline-info" href="#">
<i class="fa fa-fw fa-stop"></i>
</a>
</body>
</html> In the above code, we have used .fa class to awesome fonts in bootstrap
Check the output of the above code example.
All the best 👍