Skip to content
Alex Trofimov edited this page Jul 19, 2018 · 13 revisions

UNA uses FontAwesome icons, as of 9.0.0-RC9 FontAwesome 5 is supported. In general the same 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 same classes to separate icons into several categories:

  • fas - solid icons, this is default icons style and this class can be omitted
  • far - regular icons
  • fab - brans icons
  • fal - light 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-3

List 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):

far globe-asia 

or

far fa-globe-asia

Using 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 icons everywhere

FontAwesome Pro module has setting to change all icons on the site to light just go to FontAwesome Pro module setting enable (or disable) the only one setting then cache clearing maybe required via Studio > Dashboard > Cache > Clear CSS cache

Clone this wiki locally