How to use CSS classes In Bootstrap
In this approach, we will use css classes to bold an icon. Font size is set to fs-1, to make the icon clearly visible. -webkit-text-stroke is used to bold the icons as fw-bold doesn’t work in Bootstrap 5.
Example 1: In this example, we will make an icon bold in Bootstrap using in-built classes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Bootstrap Icons</ title > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity = "sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin = "anonymous" > </ script > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity = "sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98=" crossorigin = "anonymous" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" > < style > [class*="col"], h2, p { padding: 1rem; background-color: green; border: 2px dashed #f3f3f3; color: #fff; } i { -webkit-text-stroke: 2px; } </ style > </ head > < body > < div class = "container text-center fs-1" > < p >Style Bootstrap Icons </ p > < div class = "row" > < div class = "col-lg" > < i class = "bi bi-info-square" ></ i > </ div > < div class = "col-sm" > < i class = "bi fs-1 bi-bookmark-heart" ></ i > </ div > < div class = "col-sm" > < i class = "bi fs-1 bi-bing" ></ i > </ div > < div class = "col-lg" >< i class = "bi fs-1 bi-at" ></ i > </ div > < div class = "col-sm" > < i class = "bi fs-1 bi-star" ></ i > w3wiki < i class = "bi fs-1 bi-star" ></ i > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: Style the Icon to bold with hover effect in Bootstrap 5.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Bootstrap Icons</ title > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity = "sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin = "anonymous" > </ script > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity = "sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98=" crossorigin = "anonymous" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" > < style > [class*="col"], h2, p { padding: 1rem; background-color: green; border: 2px dashed #f3f3f3; color: #fff; } i:hover { -webkit-text-stroke: 2px ; } </ style > </ head > < body > < div class = "container text-center fs-1" > < p >Style Bootstrap Icons </ p > < div class = "row" > < div class = "col-lg" > < i class = "bi bi-info-square" ></ i > </ div > < div class = "col-sm" > < i class = "bi fs-1 bi-bookmark-heart" ></ i > </ div > < div class = "col-sm" > < i class = "bi fs-1 bi-bing" ></ i > </ div > < div class = "col-lg" >< i class = "bi fs-1 bi-at" ></ i > </ div > < div class = "col-sm" >< i class = "bi fs-1 bi-star" ></ i > w3wiki < i class = "bi fs-1 bi-star" ></ i > </ div > </ div > </ div > </ body > </ html > |
Output:
How to Style Icons Bold in Bootstrap ?
An icon is a visual representation that helps to understand the website & also helps to navigate through the website. To create a bold icon in CSS, we use font-weight as bold but in Bootstrap this syntax doesn’t work. We will learn how to style icons bold in bootstrap in this article.