How to add Icons to Buttons in Bootstrap 5 ? - Coding

Adding Icons to the buttons enhances the overall look of the web page. Buttons are the components provided to create various buttons. Bootstrap 5 includes several predefined button styles, each serving its purpose. We can add icons to the buttons in several ways including Font Awesome Icons and Icons as a background Image.

Table of Content

Icons on Group buttons
Icons with Text

Icons on Group buttons

We can add icons to buttons in Bootstrap 5 by including the Font Awesome library and using the appropriate classes. For a group of buttons, apply the Font Awesome icon classes alongside your button classes individually for each button in the group.

Example 1: Illustration of adding icons to buttons in Bootstrap 5.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>GFG</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"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
        </script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
 
<body style="text-align:center;">
    <div class="container mt-3">
        <h2 class="text-success">
            GeeksforGeeks
        </h2>
 
        <h2>How to add icons to buttons in Bootstrap 5?</h2>
 
        <div class="btn-group" role="group"
             aria-label="Basic outlined example">
            <button type="button"
                    class="btn btn-lg btn-outline-primary">
                <i class="fa fa-home"></i>
            </button>
            <button type="button"
                    class="btn btn-lg btn-outline-success">
                <i class="fa fa-code"></i>
            </button>
            <button type="button"
                    class="btn btn-lg btn-outline-danger">
                <i class="fa fa-folder"></i>
            </button>
            <button type="button"
                    class="btn btn-lg btn-outline-warning">
                <i class="fa fa-file"></i>
            </button>
 
        </div>
    </div>
</body>
 
</html>

Output:

Recording-2024-01-30-at-001309

Icons with Text

Example 2: Implementation to add icons to button and add some text.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>GFG</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"
             integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
        </script>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
 
<body style="text-align:center;">
    <div class="container mt-3">
        <h2 class="text-success">
            GeeksforGeeks
        </h2>
        <h2>How to add icons to buttons in Bootstrap 5?</h2>
        <div class="btn-group" role="group"
             aria-label="Basic outlined example">
            <button type="button" class="btn btn-lg btn-outline-danger">
                <i class="fa fa-bug"></i> Report Bug
            </button>
        </div>
    </div>
</body>
 
</html>

Output:

Recording-2024-02-02-at-231716

Reffered: https://www.geeksforgeeks.org

Bootstrap

Related
How to Center a Div with the mx-auto Class in Bootstrap 5 ?
Bootstrap 5 Grid XLarge
Difference between col-lg-, col-md-, & col-sm-* in Bootstrap 5 ?
Bootstrap Interview Questions And Answers [2024]
Create Button Like a Link with Bootstrap 5

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17