Change Alert div icon

By default, we include some icons in our various alert divs:

Sample default alert div styles

As you've likely noticed, we change those icons here in the Support KB to use Linus icons instead (because...well, why wouldn't we? He's cute!).

If you'd like to make a similar change in your own knowledge base, you can!

You have two options:

1. Replace the icons with a different Font Awesome icon.
2. Replace the icons with a custom image or icon of your choice.

We'll walk through each setup below.

Replace with different Font Awesome icon

If you'd like to replace those icons with a different Font Awesome icon, you'll need to know what the unicode value for the new icons is.

To find this, open an icon in Font Awesome.

1. Near the top, they'll list a Unicode value (they often begin with f). That's the value we'll need for the instructions below.
2. For example, if we wanted to use the circle plus icon:
   The value we'd need is: f055

Once you have a feel for the icons you want to use:

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS is selected.
3. If you're using our default Custom CSS, about 2/3 of the way down that page, there should be a section for "Alert boxes".
4. In that section, look for CSS with :before on it. The exact class varies based on which alert you want to update:
   1. Alert Danger: .alert.alert-danger:before
   2. Alert Info: .alert.alert-info:before
   3. Alert Success: .alert.alert-success:before
   4. Alert Warning: .alert.alert-warning:before
5. Once you've found the CSS for the div alert you want to update, update the content: "\fxxx"; row with the unicode for the new icon you want. Keep the quotes and the beginning \.
6. In that same CSS, you can adjust the color of the icon by adding a new hex code.
7. So, for example, here's the default CSS for the Alert Warning:

   .alert.alert-warning:before {
     content: "\f8fa";
     color: #ffcc7a;
   }

8. And here, we've adjusted it to use the circle-exclamation icon, which has a unicode value of f06a, and a slightly different color:

   .alert.alert-warning:before {
     content: "\f06a";
     color: #fcb900;
   }

   
   What the adjusted code above will produce!
9. Once you've adjusted your CSS for the icons you want to update, be sure to Save.

You can also change the background color for the entire alert by looking for the CSS for for the alerts that doesn't have the :before class and adjusting the background or border colors of those:

.alert.alert-warning {
  background: #FDF9E6;
  border: 1px solid #FBD9A4;
}

Replace with custom icon/image

Our alerts use a custom icon/image instead of a built-in Font Awesome one, for example:

If you would like to make a similar change:

1. First, be sure all of your images are available online.
   1. If you already have brand resources available at your own publicly-accessible site, grab the URLs for each of the images from there.
   2. If you don't already have brand resources available anywhere, upload the files to Library > Files. Follow the instructions to Find a file's URL.
2. Go to Settings > Style.
3. Below the preview pane, be sure Custom CSS is selected.
4. If you're using our default Custom CSS, about 2/3 of the way down that page, there should be a section for "Alert boxes".
5. First, let's comment out the CSS that adds the icons by default by adding /* before them and */ after (this is so that you can rollback these changes should you ever need to!). Look for these classes and comment them out:
   1. Alert Danger: .alert.alert-danger:before
   2. Alert Info: .alert.alert-info:before
   3. Alert Success: .alert.alert-success:before
   4. Alert Warning: .alert.alert-warning:before
   5. So this section of CSS should look like this once you're done.
6. Scroll to the very bottom of that section, so that you're adding this new CSS below all of the other alert CSS.
7. Copy the code below for any of the alerts you want to update, and paste it into that section:
   

   .hg-site .alert.alert-danger:before,
   .alert.alert-danger:before {
     background-image: url('//dyzz9obi78pm5.cloudfront.net/app/image/id/5fd04fb5ad121ce30d79bdc3/n/alert-red.png');
   }
   .hg-site .alert.alert-info:before,
   .alert.alert-info:before {
     background-image: url('//dyzz9obi78pm5.cloudfront.net/app/image/id/5fd04fb4ad121ce30d79bdc2/n/alert-blue.png');
   }
   .hg-site .alert.alert-success:before,
   .alert.alert-success:before {
     background-image: url('//dyzz9obi78pm5.cloudfront.net/app/image/id/5fd04fb3ad121c127b79c7b0/n/alert-green.png');
   }
   .hg-site .alert.alert-warning:before,
   .alert.alert-warning:before {
     background-image: url('//dyzz9obi78pm5.cloudfront.net/app/image/id/5fd04fb5ad121c230e79bce0/n/alert-yellow.png');

8. Update the url listed to be the one for your custom image/icon. Be sure it stays in the format of url('my-image-url.png');
9. You'll also need to style that image a bit. We use this CSS, which applies the same layout and format to all the alert types, and add it just before the URLs we added above:

   .hg-site:not(.hg-home-page) .alert:before,
   .alert:before {
     content: "";
     display: block;
     width: 75px;
     height: 60px;
     float: left;
     margin-top: 0px;
     background-size: contain;
     background-repeat: no-repeat;
   }

10. Be sure to Save your changes.