Icons
UNA uses FontAwesome icons.
As of 9.0.0-RC9 FontAwesome 5 is supported.
In general the same as in FontAwesome rules of icons naming are applied in UNA.
It's possible to use icons with fa- prefix and without it, by default fa- prefix isn't used.
UNA uses the following classes to separate icons into several categories:
fas- solid icons, this is default icons style and this class can be omittedfar- regular iconsfab- brands iconsfal- light icons, only available when FontAwesome Pro module is installedfad- duotone icons, only available when FontAwesome Pro module is installed
Icon colors
UNA has some predefined classes for colours so it's possible to change icon colour just by specifying colour class, for example:
globe-asia col-green-3List of available colour classes
Using icons in Studio
Icons can be used in different places, most notable in Studio > Navigation to set icons for different menus.
To set icon just specify icon name (colour name can be added as well) in icon field for the menu item:
far globe-asia or
far fa-globe-asiaUsing icons in HTML
If you want to use icons in raw HTML then use sys-icon class, like this:
<i class="sys-icon far globe-asia col-blue3">Using light or duotone icons everywhere
FontAwesome Pro module has setting to change all icons on the site to light or duotone style.
Just go to FontAwesome Pro module setting then change one setting, in some cases cache clearing is required (via Studio > Dashboard > Cache > Clear CSS cache)
Changing colors for duotone icons
To change colors for duotone icons system wide add something like this to your mix custom styles field:
:root {
--fa-primary-color: green;
--fa-primary-opacity: 1.0;
--fa-secondary-color: red;
--fa-secondary-opacity: 1.0;
}