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 within your site. For details on using FontAwesome icons, see Using Font Awesome Icons.
Sections in this article:
Set up
Warning:
Adding code that contains errors can disrupt the functionality of your digital workplace. Please use caution when adding code to this area.
Before you can use these icons, you must add the following to your digital workplace's header:
<link rel="stylesheet" type="text/css" href="https://enhancementsprod.blob.core.windows.net/enhancements/custom-icons/style.css" />
For instructions on how to navigate to your header, see Accessing the Header page
Considerations and caveats
Keep in mind the following when using this enhancement:
- 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
- This enhancement may conflict with the theming of heavily customized sites and may need additional CSS to avoid theme conflicts.
Using this 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 |
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 Igloo Help Center article, aside from the abovementioned exceptions.
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: