You can use the custom icons enhancement to make adding the supported icons to your digital workplace easier. You can use these icons in the same way that you use Font Awesome icons. For information on using FontAwesome icons, see Using Font Awesome Icons.
Sections in this article:
- Considerations
- Set up the enhancement
- Configure the enhancement
- Turn the enhancement on
- Turn the enhancement off
Considerations
Keep in mind the following when using this enhancement:
-
Igloo custom icons: The following Font Awesome transformations can't be used with Igloo custom icons:
- Using icons instead of bullets in a list
- Animations (spin, beat, etc.)
- Flip or rotate
- Customized sites: This enhancement may conflict with the theming of heavily customized sites, and additional CSS may be needed to avoid theme conflicts.
Set up the enhancement
To set up the enhancement for the first time, follow the steps below.
Add enhancement code to the header
Warning
Adding code that contains errors can disrupt the functionality of your digital workplace. Use caution when adding code to this area.
Add the following to the header of your digital workplace:
<!-- Custom icons enhancement begins -->
<link rel="stylesheet" type="text/css" href="https://enhancementsprod.blob.core.windows.net/enhancements/custom-icons/style.css" />
<!-- Custom icons enhancement ends-->Configure the enhancement
The following icons are available as part of this enhancement:
| Icon | Description | Icon name |
|---|---|---|
| Igloo Software logo | igicon-igloo | |
| Slack logo | igicon-slack | |
| Microsoft Teams logo | igicon-teams | |
| iOS App Store logo | igicon-app-store-ios | |
| Google Play Store logo | igicon-google-play | |
| Mastodon logo | igicon-mastodon | |
| TikTok logo | igicon-tiktok | |
| X (formerly Twitter) logo | igicon-x | |
| Threads logo | igicon-threads |
You can place these icons anywhere that HTML can be placed by adding an <a> or <i> element, with a class of igicon-nameOfIcon. For example, to use the TikTok icon, you would use something like this:
<i class="igicon-tiktok"> </i>These icons can be used the same way as Font Awesome icons, including most of the Font Awesome transformations outlined in the Using Font Awesome icons article, aside from the exceptions mentioned above.
To use the Font Awesome transformations, use the same classes as you would to customize a Font Awesome icon. For example:
<p>
<i class="igicon-teams fa-2x fa-border fa-pull-right"> </i>
<i class="igicon-slack fa-xs"> </i>
</p>
<p>
<i class="igicon-igloo fa-5x"> </i>
</p>The code above will result in the icons appearing like this:
Turn the enhancement on
Once the code has been placed, the enhancement is ready to be used. If you have already turned the enhancement off following the steps in the Turn the enhancement off section below, you can remove <!-- before and --> after the middle line and save the changes to the header.
Turn the enhancement off
To turn the enhancement off, you can remove the code entirely or add <!-- before and --> after the middle line, as shown below, and save the changes to the header.
<!-- Custom icons enhancement begins -->
<link rel="stylesheet" type="text/css" href="https://enhancementsprod.blob.core.windows.net/enhancements/custom-icons/style.css" />
<!-- Custom icons enhancement ends--><!-- Custom icons enhancement begins -->
<!--<link rel="stylesheet" type="text/css" href="https://enhancementsprod.blob.core.windows.net/enhancements/custom-icons/style.css" /> -->
<!-- Custom icons enhancement ends-->