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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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" > w3wiki </ 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:
How to add Icons to Buttons in Bootstrap 5 ?
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