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>