How to Style Icons Bold in Bootstrap ? Last Updated : 30 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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.Using CSS classesIn 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/[email protected]/dist/js/bootstrap.min.js" integrity= "sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"> </script> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity= "sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98=" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/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> GeeksforGeeks <i class="bi fs-1 bi-star"></i> </div> </div> </div> </body> </html> Output:Style Icon Bold in Bootstrap 5Example 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/[email protected]/dist/js/bootstrap.min.js" integrity= "sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"> </script> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity= "sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98=" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/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> GeeksforGeeks <i class="bi fs-1 bi-star"></i> </div> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Style Icons Bold in Bootstrap ? P pritamvinodfulari Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Questions Similar Reads How to Insert a Search Icon in Bootstrap ? In this article, we will see how to insert a search icon in Bootstrap. While Bootstrap does not include an icon set by default, they do have their own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. There are various ways to add a searc 3 min read 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 Icon 2 min read How to add icons in project using Bootstrap ? Bootstrap Icons is an open-source icon library specifically designed for use with Bootstrap's framework. Adding icons using Bootstrap means integrating the Bootstrap Icons library into your project and using its icon classes in HTML. This allows easy inclusion of scalable, customizable icons directl 2 min read How to use icons in Bootstrap Framework ? Bootstrap is CSS framework for developing responsive and mobile-first websites. Bootstrap added a feature in which one can use quality icons provided by Bootstrap. These icons are available in SVGs or web fonts format. Bootstrap provides a thousand plus high-quality icons, which you can use in your 2 min read How to Customize Button Styles in Bootstrap ? Customizing button styles in Bootstrap involves modifying predefined classes or creating custom CSS rules. This allows alignment with brand identity, and differentiation, and ensures design consistency across projects. We can customize button styles in Bootstrap using different approaches as listed 3 min read How to add badge to list group in Bootstrap ? In this article, we will learn how to make a badge list that gives the idea on a priority basis of the list. List Groups are used to display series of content. We can use the List Groups to display a series or list of content in an organized way & this can be helpful as we can modify it as per o 3 min read How to add icons in the button in HTML ? Adding icons in buttons in HTML involves including visual symbols or images within buttons to enhance their appearance and usability. This can be done using icon libraries like Font Awesome, Bootstrap Icons, or Material Icons, or by inserting images directly with <img> tags for visual cues.Add 3 min read What are glyphicons in Bootstrap ? Bootstrap Glyphicons are a set of small, glyph-based icons that enhance user interfaces. They offer a variety of symbols for common actions and elements, allowing for improved visual representation and functionality in web applications. Applications:Â To understand more effectively and easily in web 2 min read How to add tooltip to an icon using Bootstrap ? In this article, we will see how to add tooltip element to an icon using Bootstrap. A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the webpage. 2 min read How to use Tooltip on Social Media Icons in Bootstrap 5 ? In Bootstrap, Tooltips can be added to the social media icons that can be displayed on the icon's hover. Tooltips enhance the user experience by offering quick hints, tips, or clarifications that help users understand the functionality of interface elements, navigate through a website or application 2 min read Like