Account
Cart

No products in the cart.

Documentation Theme

Alert Icons

Add icons to Bootstrap alerts by using classes.

Default alerts doesn’t have an icon (WooCommerce alerts are different, they have icons):

Alert info

<p class="alert alert-info">Alert info</p>

Add alert-icon alert-*-icon classes to show an alert with a Font Awesome icon:

Alert info with icon

<p class="alert alert-info alert-icon alert-info-icon">Alert info with icon</p>

Available icon classes:

  • alert-info-icon
  • alert-success-icon
  • alert-warning-icon
  • alert-danger-icon

To add or change an icon, use the following:

.alert-[name/type]-icon::before {
  content: ' ';
  --alert-icon: url("[url encoded svg here]");
}

Extend

@extend in _bscore-custom.scss can be used as well to add the icons to all alerts:

// Add icons to alerts
.alert-info,
.alert-success,
.alert-warning,
.alert-danger {
  @extend .alert-icon;
}

.alert-info {
  @extend .alert-info-icon;
}

.alert-success {
  @extend .alert-success-icon;
}

.alert-warning {
  @extend .alert-warning-icon;
}

.alert-danger {
  @extend .alert-danger-icon;
}
To top