Glyphs

The term glyph describes within Fronstage an icon, which can be displayed in grids, lists, drop-down menus, and so on. The majority of objects/portlets where glyphs can be set, will expect a string as a glyph definition, not a graphically visible picture. Glyph CSS class name from the supported set is expected. Both TeamsClient and ReactClient support different icon sets.

The current presumption is that you have only one application installed at the time, which means you will use only one icon set..

Important

After changing a glyph, clear a cache by using its visual editor to see the change immediately.

ReactClient

Application supports FontAwesome 4.7 icon set.

  1. The provided link contains a list of all the available icons, grouped according to intended usage.

    ../../_images/font-awesome-preview.nol10n.png
  2. Click on the icon to see its details, where the icon preview in several sizes, its name, and CSS definition are present.

    ../../_images/font-icon-detail.nol10n.png
  3. In the class definition, you can see the needed string for Fronstage, for example fa fa-envelope-open, see the picture above.

  4. Insert it as a glyph value and save.

    ../../_images/glyph-definition.en.png
  5. The icon is visible in the application.

    ../../_images/f-awesome-rc-usage-example.nol10n.png

TeamsClient

The application supports its own set, developed right for its needs and visual editors (listed below). Define the glyph with the syntax fs IconName, for example fs fs-add-friend.

  1. Glyph definition

    ../../_images/tc-glyph-example.en.png
  2. TeamsClient result

    ../../_images/tc-glyph-defined-example.en.png
Icon set for 10/2023
../../_images/tc-font-1.nol10n.png ../../_images/tc-font-2.nol10n.png ../../_images/tc-font-3.nol10n.png
../../_images/tc-font-4.nol10n.png ../../_images/tc-font-5.nol10n.png ../../_images/tc-font-6.nol10n.png
../../_images/tc-font-7.nol10n.png ../../_images/tc-font-8.nol10n.png ../../_images/tc-font-9.nol10n.png
../../_images/tc-font-10.nol10n.png ../../_images/tc-font-11.nol10n.png ../../_images/tc-font-12.nol10n.png
../../_images/tc-font-13.nol10n.png ../../_images/tc-font-14.nol10n.png ../../_images/tc-font-15.nol10n.png