Learn how to Bootstrap icon styles in html and css

In this tutorial, Learn how to style bootstrap icons

How to Resize Bootstrap Icons in CSS and HTML?

To resize web fonts, use the CSS ‘font-size’ attribute.

font-size can be added in style tag in html or apply css selector to add the styles.

Following are icons resized

used code

<div>
      <i class="bi bi-facebook" style="font-size: 30px"></i>
      <i class="bi bi-github" style="font-size: 30px"></i>
      <i class="bi bi-twitter" style="font-size: 30px"></i>
      <i class="bi bi-google" style="font-size: 30px"></i>
      <i class="bi bi-instagram" style="font-size: 30px"></i>
    </div>

For SVG icons, use height and width. Here is an svg code for resize SVG icon

<div>
 <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-facebook"
        viewBox="0 0 16 16"
      >
        <path
          d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"  />
      </svg>
      </div>

Change width=“32” and height=“32” to SVG tag in html.

Another way, Resize styles applied using css selector

svg.bi bi-facebook{
       height: 64px !important;
    width: 64px !important;

}

How to style the color, size and shadow Bootstrap icons?

It is easy to change color size, shadow and any other styles similar to fonts.

here is inline styles for changing icon color

<div>
      <i class="bi bi-facebook " style="font-size: 30px;color: green;"></i>
      <i class="bi bi-github " style="font-size: 30px;color: green;"></i>
      <i class="bi bi-twitter " style="font-size: 30px;color: green;"></i>
      <i class="bi bi-google " style="font-size: 30px;color: green;"></i>
      <i class="bi bi-instagram " style="font-size: 30px;color: green;"></i>
</div>

The icons displayed in browser are

Another way using css selector,

green class selector is declared in css file

.green {
  color: green;
  text-shadow: 1px 1px 1px #ccc;
  font-size: 2.5em;
}

HTML

<div>
      <i class="bi bi-facebook green"></i>
      <i class="bi bi-github green"></i>
      <i class="bi bi-twitter green"></i>
      <i class="bi bi-google green"></i>
      <i class="bi bi-instagram green"></i>
</div>

How to make icon hyperlinks in html

Adding icon with hyperlinks is very easy. Just wrap icon tag inside anchor links

Here is example code icons link

<div>
      <a href="#"> <i class="bi bi-facebook blue" ></i></a>
      <a href="#"> <i class="bi bi-github blue" ></i></a>
      <a href="#"> <i class="bi bi-twitter blue" ></i></a>
      <a href="#"> <i class="bi bi-google blue" ></i></a>
      <a href="#"> <i class="bi bi-instagram green" ></i></a>
</div>

You can use span without anchor links which can attach click handlers in javascript.

<div>
      <span class="link"> <i class="bi bi-facebook blue" ></i></span>
      <span class="link"> <i class="bi bi-github blue" ></i></span>
      <span class="link"> <i class="bi bi-twitter blue" ></i></span>
       <span class="link"> <i class="bi bi-google blue" ></i></span>
      <span class="link">  <i class="bi bi-instagram green" ></i></span>
</div>

CSS to apply span with cursor hand

.link {
     cursor: pointer;
}

How to make rounded circle bootstrap icons in HTML?

Here is icon html code to display circle icons

HTML:

<div>
      <i class="bi bi-facebook"></i>
      <i class="bi bi-github"></i>
      <i class="bi bi-twitter"></i>
      <i class="bi bi-google"></i>
      <i class="bi bi-instagram"></i>
</div>

you can use below css to apply icon tag CSS:

i.bi {
  display: inline-block;
  border-radius: 50px;
  box-shadow: 0px 0px 2px #6b6b6b;
  padding: 0.2em 0.3em;
}

Displayed Output:

How to make square icons in Bootstrap ?

Here is icon html code to display square icons