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 in _bscore_custom.scss can be used as well to add the icons to all alerts:

// Add icons to alerts
.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