Icons - Documentation | Front - Multipurpose Responsive Template

@@include("@@autopath/partials/docs/docs-sidebar.html", { "link": "icons.html" })

Types

Use .icon-* or .icon-soft-* classes to change the visual style of the icon.

Preview
HTML

              
                <span class="icon icon-primary">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-soft-primary">
                  <i class="bi-house"></i>
                </span>

Color variants

Predefined solid color button styles.

Preview
HTML

              
                <span class="icon icon-primary">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-secondary">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-success">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-danger">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-warning">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-info">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-light">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-dark">
                  <i class="bi-house"></i>
                </span>

Soft icons

Use .icon-soft-*

Preview
HTML

              
                <span class="icon icon-soft-primary">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-soft-secondary">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-soft-success">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-soft-danger">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-soft-warning">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-soft-info">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-soft-light">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-soft-dark">
                  <i class="bi-house"></i>
                </span>

Sizes

Fancy larger or smaller buttons? Add .icon-lg, .icon-sm or .icon-xs for additional sizes.

Preview
HTML

              
                <span class="icon icon-lg icon-primary">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-primary">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-sm icon-primary">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-xs icon-primary">
                  <i class="bi-house"></i>
                </span>

Circle

Use the .icon-circle modifier class to make icons circled.

Preview
HTML

              
                <span class="icon icon-lg icon-primary icon-circle">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-primary icon-circle">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-sm icon-primary icon-circle">
                  <i class="bi-house"></i>
                </span>
                <span class="icon icon-xs icon-primary icon-circle">
                  <i class="bi-house"></i>
                </span>