Skip to main content

Example Bootstrap Icons CSS

Lots of easy ways to use Bootstrap Icons

After you get up and running, you can place Bootstrap icons just about anywhere with the <i> tag. Some examples appreciatively re-used from the Bootstrap documentation.

Basic Icons

bi-camera

You can place Bootstrap icons just about anywhere using the CSS Prefix biicon and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct). 

<i class="biicon bi-camera"></i> biicon bi-camera
  • Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

Large Icons

bi-camera

bi-camera biicon-2x

bi-camera biicon-2x

bi-camera biicon-3x

To increase icon sizes relative to their container, use the biicon-2x, biicon-3x, biicon-4x, or biicon-5x classes. 

<i class="fa  bi-camera fa-lg"></i> fa-lg
<i class="biicon  bi-camera biicon-2x"></i> biicon-2x
<i class="biicon  bi-camera biicon-3x"></i> biicon-3x
<i class="biicon  bi-camera biicon-4x"></i> biicon-4x
<i class="biicon  bi-camera biicon-5x"></i> biicon-5x
  • Example: basic icon If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

List Icons

  • List Icon
  • Can be used
  • as bullet
  • in list

Use biicon-ul and bi-li to easily replace default bullets in unordered lists.

<ul class="biicon-ul">
  <li><i class="biicon bi-li bi-check-square-fill"></i>List icons</li>
  <li><i class="biicon bi-li bi-check "></i>can be used</li>
  <li><i class="biicon bi-li fa bi-check2-circle "></i>as bullets</li>
  <li><i class="biicon bi-li bi-info-circle-fill"></i>in lists</li>
</ul>