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;
}