Bootstrap icons — Overview

#bootstrap #html

Bootstrap is a large and complex frontend library which we all fancy having some powerful functionality and customization built-in. Occasionally though, when you need to have icons in your web projects; you go straight to Font-awesome or Glyphicons (Bootstrap v3). But developers and designers often felt constricted to the fact that they have to rely on some other third party library for the icons having to pay for icons they desire. This just didn’t seem right for any of us.

Fast forward 2019, gone are the days when we had to choose between Font-awesome or Glyphicons (Bootstrap v3), For the first time ever, Bootstrap has its own icon library, custom designed and built for its components… (navbars, button, cards, and more).

You can Track latest releases on Github here, also you can checkout Bootstrap icons documentation.

---

Getting Started

With npm

`npm install bootstrap-icons`

Download

Download the project from here, and from the icons folder and directly copy icons SVGs which you require in your project.

Usage

Choose how you would like to integrate Bootstrap icons in your web application.

External image

Use directly from the project directory and reference them like normal images with the <img> element.

Code:

`<img src="/assets/img/bootstrap.svg" width="64" height="64" title="Bootstrap">`

Preview:

Embedded

Embed your icons within the HTML of your page (as opposed to an external image file). Here we’ve used a custom width and height.

Code:

`<svg class="bi bi-chevron-right" width="64" height="64" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/>
</svg>`

Preview:

As CSS

You can also use the SVG within your CSS (be sure to escape any characters, such as # to %23 when specifying hex color values). When no dimensions are specified via width and height on the <svg>, the icon will fill the available space.

Code:

`               .bi::before {
                              display: inline-block;
                              content: "";
                              background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
                              background-repeat: no-repeat;
                              background-size: 1rem 1rem;
                            }`

Preview:

---

Styling

Color can be changed by setting a .text-* class or custom CSS:

Using bootstrap css classes

Code:

`<svg class="bi bi-alert-triangle text-danger" width="64" height="64" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">`

`                              ...`

`</svg>`

Preview:

Using custom css classes

Code:

`.my-custom-css-class{
                      color:green;
                    }`

Preview:

Using Style Attribute

Code:

`style="color:blue;"`

Preview:

Original article on: https://blog.kushalbhalaik.xyz/bootstrap-icons-overview/

Comments

[Joseph Kariuki]

Hi. Is there an icon for Dev Community blog in Bootstrap5. I have tried searching but haven't found it.

[uuware]

Great post. Here is an open source icons collection and tool for generating partial icon font or downloading icons as an image.

uuware / icons-font-customization

A collection of over 33,000 high-quality free svg icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.

icons-font-customization

A collection of over 33,000 high-quality free svg icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.
Open See all icons, to view all icons. You can change color, background color, size for icons and can search or cache selected results.
Update: Now you can download PNG, JPG, ICO and Apple ICNS image files directly from online.
🔶Desktop Application for Windows, Linux, MacOS is released, or goto Download Releases 🔶

（中文说明请参考后半部分）

---

🔶All icons collected here are completely free for your personal or business requirements.🔶
You can use this tool to combine / generate your own icon webfonts for your project from different sources.
This relevant license information is included in generated css file automatically.

Icon Collections:

• ant-design-icons Source: visit, License: MIT
• Bootstrap Icons Source: visit, License: MIT
• BoxIcons Source: visit, License: CC 4.0
• …

View on GitHub