Icons
Icons are visual representations. In the EUAA applications most of the icons are based on Fontawesome which is a set of icon fonts.
For some applications the OCHA icon set is being used.
Fontawesome icons
Download the Font Awesome icon kit "Free for Web" and use the corresponding class name to show the icons.
Download Font Awesome icons.
The following selection shows the ones that we are using currently.
Font Awesome: 6 Free Solid
Icon name (class): fas fa-chevron-down
Used for: accordion, menu
<i class="fas fa-chevron-down"></i>
Font Awesome: 6 Free Solid
Icon name (class): fas fa-chevron-up
Used for: accordion, menu
<i class="fas fa-chevron-up"></i>
Font Awesome: 6 Free Solid
Icon name (class): fas fa-user
Used for: user
<i class="fas fa-user"></i>
Font Awesome: 6 Free Regular
Icon name (class): far fa-calendar-alt
Used for: calendar
<i class="far fa-calendar-alt"></i>
Font Awesome: 6 Free Solid
Icon name (class): fas fa-search
Used for: search
<i class="fas fa-search"></i>
Font Awesome: 6 Free Solid
Icon name (class): fas fa-check
Used for: confirmation, success
<i class="fas fa-check"></i>
Font Awesome: 6 Free Solid
Icon name (class): fas fa-times
Used for: close, error
<i class="fas fa-times"></i>
Font Awesome: 6 Free Regular
Icon name (class): far fa-file-alt
Used for: document, file
<i class="far fa-file-alt"></i>
Font Awesome: 6 Free Solid
Icon name (class): fas fa-file-download
Used for: download
<i class="fas fa-file-download"></i>
Font Awesome: 6 Free Regular
Icon name (class): far fa-envelope
Used for: email, message
<i class="far fa-envelope"></i>
Font Awesome: 6 Free Regular
Icon name (class): far fa-clone
Used for: copy, clone
<i class="far fa-clone"></i>
Font Awesome: 6 Free Solid
Icon name (class): fas fa-info-circle
Used for: info message
<i class="fas fa-info-circle"></i>
Font Awesome: 6 Free Solid
Icon name (class): fas fa-check-circle
Used for: success message
<i class="fas fa-check-circle"></i>
Font Awesome: 6 Free Solid
Icon name (class): fas fa-exclamation-triangle
Used for: alert message
<i class="fas fa-exclamation-triangle"></i>
Font Awesome: 6 Free Solid
Icon name (class): fas fa-times-circle
Used for: error message
<i class="fas fa-times-circle"></i>
Colours for Fontawesome icons
Adding colour to Fontawesome icons is easy and this can be done by adding the following classes
Normal text colour - default
<i class="far fa-file-alt u-primary-txt-color"></i>
Secondary text colour
<i class="far fa-file-alt u-secondary-txt-color"></i>
Link text colour
<i class="far fa-file-alt u-link-txt-color"></i>
Sizes for Fontawesome icons
Apply different sizing to Fontawesome icons by means of the following classes.
small size
<i class="far fa-file-alt u-txt-small"></i>
regular size
<i class="far fa-file-alt u-txt-regular"></i>
large size
<i class="far fa-file-alt u-txt-large"></i>
x large size
<i class="far fa-file-alt u-txt-xlarge"></i>
Custom icons
Info icon
<div class="icon__info"></div>
Success icon
<div class="icon__success"></div>
Alert icon
<div class="icon__alert"></div>
Error icon
<div class="icon__error"></div>
OCHA Icon set
Some EUAA applications use specific icon fonts based on the OCHA icon set. The full list of OCHA icon set can be found
here.