In this document we'll be using SUI for ng2-semantic-ui and Bootstrap for ng-bootstrap.
Both SUI and the ALMA UI Guidelines use
Font Awesome icons,
using the <i> HTML element to host them:
<i class="fas fa-edit"></i>
Note The UI Guidelines suggest using an extra class, has-text, if the icon
is followed by some text:
<button>
<i class="fas fa-edit has-text"></i>
Edit
</button>
In keeping with its name, Semantic UI named icons for their meaning,
like setting icon, while Font Awesome named them for their family and
appearance, like fas fa-cog.
Migrating icons is a matter of replacing the SUI names with the Font Awesome ones.
| SUI | Bootstrap | |
|---|---|---|
| add icon | fas fa-plus | |
| calendar alternate icon | far fa-calendar-alt | far is not a typo! |
| calendar icon | far fa-calendar-alt | same |
| dropdown icon | fas fa-caret-down | |
| delete icon | fas fa-times | |
| edit icon | fas fa-edit | |
| help icon | fas fa-question | |
| minus icon | fas fa-minus-square | |
| ordered list icon | fas fa-list-ol | |
| outline icon | fas fa-list-ul | |
| plus icon | fas fa-plus | |
| remove icon | fas fa-times fa-lg | |
| search icon | fas fa-search | |
| setting icon | fas fa-cog | |
| sign out icon | fas fa-sign-out-alt | |
| user icon | fas fa-user | |
| user plus icon | fas fa-user-plus |