Bootstrap Icons
In the this article users will learn how to add and to use Bootstrap icons on a website page.
Using Icons in Bootstrap 5
Bootstrap now offers an extensive collection of over 1,300 high-quality icons, available in SVGs, SVG sprite, or web fonts formats. These icons can be utilized in any project, with or without Bootstrap.
The advantage of employing font icons lies in their flexibility. You can easily customize the color of icons by applying the CSS color property, and adjusting their size can be achieved with a simple CSS font-size property.
To include and use Bootstrap icons on a web page
Including Bootstrap Icons in a Web Page
The easiest method is to utilize the CDN link. This link directs to a remote CSS file that contains all the necessary classes to generate font icons.
You can incorporate Bootstrap icons in either a Bootstrap template or a standalone web page without utilizing the Bootstrap framework. The following example illustrates this:
<body>
<h1 class="m-4"><i class="bi-globe"></i> Welcome Friends</h1>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
How to Use Bootstrap Icons in Your Code
To implement Bootstrap icons in your code, you'll need an <i> tag with an individual icon class .bi-* applied to it. The general syntax for utilizing Bootstrap icons is as follows:
<i class="bi-class-name"></i> The specific icon class-name, such as search, person calendar, star, globe, facebook, twitter, and more, corresponds to the name of the particular icon class. A comprehensive list of all Bootstrap icon classes is available for reference.
For instance, to add a search icon inside a button, you can use the following code as an example:
<div class="m-4">
<button type="submit" class="btn btn-primary"><span class="bi-search"></span> Searching</button>
<button type="submit" class="btn btn-secondary"><span class="bi-search"></span> Searching</button>
</div>
Similarly, you have the freedom to place icons within navs, forms, tables, paragraphs, or any desired location. In the next chapter, you'll learn how to utilize these icons in Bootstrap nav components.
Note: It's essential to leave a space after the closing tag of the icon element (i.e., after the </i> tag) when using icons alongside text strings, such as inside buttons or navigation links. This ensures proper spacing between the icon and text.
Using Font Awesome Icons in Bootstrap
In addition to Bootstrap icons, you can also integrate external icon libraries in your Bootstrap project. One highly popular and compatible library is Font Awesome, which provides over 675 icons in SVG, PNG, and web font formats for enhanced usability and scalability.
<body><h1 class="m-4"><i class="fa fa-globe"></i>Welcome Friends</h1>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
How to Use Font Awesome Icons in Your Code
To include Font Awesome icons in your code, you'll need an <i> tag with a base class .fa and an individual icon class .fa-*. The general syntax for using Font Awesome icons is:
<i class="fa fa-class-name"></i> Where class-name represents the specific icon class, such as search, user, calendar, star, globe, facebook, twitter, and more. A complete list of all Font Awesome icons classes is available for reference.
For example, you can place a Font Awesome search icon inside a button using the following code:
<div class="m-4">
<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Searching</button>
<button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Searching</button>
</div>
Similarly, you can place Font Awesome icons within navs, forms, tables, paragraphs, and other components in the same manner as you would with Bootstrap icons.
FAQ
What is Bootstrap Icons?
Bootstrap Icons is a library of scalable vector icons that can be easily customized and integrated into web projects built with Bootstrap. It provides a wide range of commonly used icons for various purposes, enhancing the visual appeal and usability of web applications.
How do you include Bootstrap Icons in a Bootstrap project?
To include Bootstrap Icons, add the following link tag to your HTML file within the <head> section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.18.0/font/bootstrap-icons.css">
Can you use Bootstrap Icons with Bootstrap versions other than Bootstrap 5?
Yes, Bootstrap Icons is designed to work with Bootstrap 5 and later versions. If you are using an older version of Bootstrap, it's recommended to upgrade to Bootstrap 5 to seamlessly integrate Bootstrap Icons.
How do you add an icon to an element using Bootstrap Icons?
Use the <i> or <span> element with the bi class and the specific icon class. For example:
<i class="bi bi-heart"></i> <!-- Heart icon -->
Can you change the size of Bootstrap Icons?
Yes, you can change the size of Bootstrap Icons by applying additional classes like bi-lg for large icons or bi-2x, bi-3x, and so on for specific scaling factors:
<i class="bi bi-heart bi-lg"></i> <!-- Large heart icon -->
<i class="bi bi-heart bi-2x"></i> <!-- Twice the size heart icon -->
How do you change the color of Bootstrap Icons?
Customize the color of Bootstrap Icons by applying additional classes such as text-primary for the primary color or text-danger for a red color:
<i class="bi bi-heart text-primary"></i> <!-- Heart icon in primary color -->
<i class="bi bi-heart text-danger"></i> <!-- Heart icon in red color -->
Are Bootstrap Icons responsive?
Yes, Bootstrap Icons are responsive by default. You can use responsive sizing classes like bi-lg, bi-2x, etc., to control the size based on the viewport size.
Can I use Bootstrap Icons without the Bootstrap framework?
Certainly, Bootstrap Icons are independent of the Bootstrap framework. They are standalone SVG icons that can be utilized in any HTML and CSS project without requiring the Bootstrap library.
Are Bootstrap Icons lightweight?
Yes, Bootstrap Icons are lightweight because they are primarily SVG files. SVGs are typically smaller in file size compared to other image formats, contributing to faster webpage loading times.
Do Bootstrap Icons come with built-in hover or animation effects?
Bootstrap Icons themselves don't come with pre-built hover or animation effects. However, you can apply CSS transitions or animations to them to create these effects.
Are Bootstrap Icons available in different sizes?
Bootstrap Icons are vector-based, allowing them to be resized without losing quality. While they're designed to work well at common web sizes, you can adjust their dimensions as needed.
How do you rotate or flip Bootstrap Icons?
You can use rotation and flipping classes like bi-rotate-90, bi-flip-horizontal, and bi-flip-vertical to manipulate the orientation of Bootstrap Icons:
<i class="bi bi-heart bi-rotate-90"></i> <!-- Rotated 90 degrees heart icon -->
<i class="bi bi-heart bi-flip-horizontal"></i> <!-- Horizontally flipped heart icon -->
Can you stack Bootstrap Icons on top of each other?
Yes, you can stack multiple Bootstrap Icons on top of each other using the stacking classes. For example:
<span class="bi-stack">
<i class="bi bi-square bi-stack-2x"></i>
<i class="bi bi-heart bi-stack-1x"></i>
</span>
How do you use Bootstrap Icons in buttons?
You can easily use Bootstrap Icons within buttons by combining the bi class with the button's text. For example:
<button type="button" class="btn btn-primary">
<i class="bi bi-check"></i> Submit
</button>
How can you align Bootstrap Icons vertically within text?
You can align Bootstrap Icons vertically within text using the align-top or align-middle classes. For example:
<span class="align-top"><i class="bi bi-heart"></i> Top-aligned Icon</span>
<span class="align-middle"><i class="bi bi-heart"></i> Middle-aligned Icon</span>
How do you use Bootstrap Icons in navigation bars?
You can incorporate Bootstrap Icons into navigation bars by combining them with the appropriate HTML elements. For instance:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<i class="bi bi-house-door"></i> Home
</a>
</nav>
Can you change the opacity or add shadows to Bootstrap Icons?
Bootstrap Icons inherit opacity and shadow styles from the surrounding elements. You can customize these styles using CSS. For example:
.custom-icon {
opacity: 0.7; /* Adjust opacity as needed */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a text shadow */
}
<i class="bi bi-heart custom-icon"></i> <!-- Custom-styled heart icon -->
How do you use Bootstrap Icons in input groups?
You can use Bootstrap Icons in input groups by incorporating them directly into the input group components. For instance:
<div class="input-group">
<span class="input-group-text">
<i class="bi bi-search"></i>
</span>
<input type="text" class="form-control" placeholder="Search">
</div>
Are there any alternatives to Bootstrap Icons for icon integration in Bootstrap projects?
Yes, there are alternatives such as Font Awesome and Material Icons. These libraries offer a wide range of icons and can be easily integrated into Bootstrap projects.
How do you create a stacked icon with a badge in Bootstrap?
You can stack an icon and a badge using the Bootstrap stacking classes. For example:
<span class="bi-stack">
<i class="bi bi-envelope bi-stack-1x"></i>
<i class="bi bi-circle-fill bi-stack-2x text-danger"></i>
<span class="bi-stack-1x top-0 start-100 translate-middle badge rounded-pill bg-danger">5</span>
</span>
How can you use Bootstrap Icons with different icon sets within the same project?
Bootstrap Icons is designed to work seamlessly with other icon sets. Simply include the necessary CSS files for the additional icon sets, and use their respective classes alongside Bootstrap Icons.
How do you flip an icon diagonally in Bootstrap?
Use the bi-flip-diagonal-2x class to flip an icon diagonally:
<i class="bi bi-heart bi-flip-diagonal-2x"></i> <!-- Diagonally flipped heart icon -->
Can you create custom-colored Bootstrap Icons?
Yes, you can create custom-colored Bootstrap Icons by applying your desired color through CSS. For example:
.custom-color {
color: #ff9900; /* Set your custom color */
}
<i class="bi bi-star custom-color"></i> <!-- Custom-colored star icon -->
How do you use Bootstrap Icons with buttons to create icon-only buttons?
You can create icon-only buttons by placing the Bootstrap icon within a button element:
<button type="button" class="btn btn-primary">
<i class="bi bi-download"></i>
</button>
Can you change the background color of a Bootstrap Icon?
The background color of Bootstrap Icons is generally inherited from the surrounding elements. To customize it, you can use additional styling or background utility classes.
How do you align Bootstrap Icons horizontally within text?
Use Bootstrap's text alignment classes such as text-start, text-center, and text-end to align icons within text horizontally:
<p class="text-start">Start <i class="bi bi-arrow-right"></i></p>
How can you use Bootstrap Icons in alerts to convey information visually?
You can include Bootstrap Icons in alerts to visually convey information. For example:
<div class="alert alert-success" role="alert">
<i class="bi bi-check-circle"></i> Operation successful!
</div>
How do you add tooltips to Bootstrap Icons for additional information?
Utilize Bootstrap's Tooltip component by adding the data-bs-toggle and data-bs-tooltip attributes to the icon:
<i class="bi bi-info" data-bs-toggle="tooltip" data-bs-tooltip="Additional information"></i>
How do you use Bootstrap Icons within cards for enhanced visual elements?
Incorporate Bootstrap Icons within cards for visual appeal. For example:
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title <i class="bi bi-star-fill"></i></h5>
<p class="card-text">Card content with an icon.</p>
</div>
</div>
How do you create a spinner using Bootstrap Icons for loading indication?
Use Bootstrap's Spinner component with icons for loading indication:
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
<i class="bi bi-arrow-repeat"></i>
</div>
Conclusion
Bootstrap Icons stand as a pinnacle in the realm of iconography, offering a comprehensive and versatile toolkit. Renowned for their high-quality and customizable nature, these icons seamlessly weave into web projects, providing developers with a vast and diverse collection spanning various categories.
The vector-based approach of Bootstrap Icons ensures they transcend the limitations of screen sizes, effortlessly scaling smoothly across different dimensions. This inherent adaptability makes them an ideal choice for creating visually stunning and responsive designs that cater to diverse viewing experiences.
As standalone elements or harmonious companions to other Bootstrap components, these icons emerge as a convenient solution for developers seeking to infuse their projects with professional iconography. Their role extends beyond mere visuals, becoming integral tools to effectively communicate information and prompt user actions.
Within this toolkit, the ability to go beyond static visuals shines through with features like changing icon size and facilitating size and color customization. This grants developers unparalleled flexibility in tailoring icons to their unique design visions. The options for custom icon styling and icon size and color adjustments further elevate the potential for personalization.
In essence, Bootstrap Icons not only provide a rich aesthetic layer to web development but also empower developers with a host of options for fine-tuning and customizing their visual language. The toolkit's commitment to icon customization options reflects its dedication to offering a dynamic and responsive suite of tools for the ever-evolving landscape of web design.