Icon

Bootstrap Icon is an element which is used for dismissing components like modals and alerts. See how easy implementation is.

Examples

Default Icon example.

html

            <button type="button" class="btn btn-primary">
                <i class="fa fa-book"></i>
                <span> Click me </span>
              </button>
              <button type="button" class="btn btn-secondary">
                <i class="fa fa-user"></i>
                <span>Click me </span>
              </button>
              <button type="button" class="btn btn-success">
                <i class="fa fa-check"></i>
                <span> Click me </span>
              </button>
              <button type="button" class="btn btn-danger">
                <i class="fa fa-times"></i>
                <span> Click me </span>
              </button>
              <button type="button" class="btn btn-dark">
                <i class="fa fa-home"></i>
                <span> Click me </span>
              </button>
              <button type="button" class="btn btn-info">
                <i class="fa fa-book"></i>
                <span> Click me </span>
              </button>
              <button type="button" class="btn btn-outline-warning">
                <i class="fa fa-lock"></i>
                <span> Click me </span>
              </button>

Border Icons

html

            <i class="fa fa-book icon-border"></i>
            <i class="fa fa-user icon-border"></i>
            <i class="fa fa-check icon-border"></i>
            <i class="fa fa-times icon-border"></i>
            <i class="fa fa-home icon-border"></i>
            <i class="fa fa-book icon-border"></i>
            <i class="fa fa-lock icon-border"></i>

Spin Icons

html

            <i class="fa fa-book icon-spin"></i>
            <i class="fa fa-user icon-spin"></i>
            <i class="fa fa-check icon-spin"></i>
            <i class="fa fa-times icon-spin"></i>
            <i class="fa fa-home icon-spin"></i>
            <i class="fa fa-book icon-spin"></i>
            <i class="fa fa-lock icon-spin"></i>

Pull Icons

html

            <i class="fa fa-book icon-pull"></i>

Pulse Icons

html

            <i class="fa fa-book icon-pulse"></i>
            <i class="fa fa-user icon-pulse"></i>
            <i class="fa fa-check icon-pulse"></i>
            <i class="fa fa-times icon-pulse"></i>
            <i class="fa fa-home icon-pulse"></i>
            <i class="fa fa-book icon-pulse"></i>
            <i class="fa fa-lock icon-pulse"></i>

Rotate Icons

html

            <i class="fa fa-user icon-rotate"></i>
            <i class="fa fa-check icon-rotate"></i>

Sizes

html

            <i class="fa fa-user icon-lg"></i>
            <i class="fa fa-user icon"></i>
            <i class="fa fa-user icon-sm"></i>