Service icons

Since Workplace8.1

Add your own service icons into workplace

You can add your own icons to Workplace.

Create your own font icon files

In order to add new icons, you must create your own font icon.
You can follow this tutorial in order to create this font-icon

Warning

Before exporting your font from icomoon site, in order to avoid tu replace workplace fonts, change your export prerferences and change :
Font name to [myapp]-icomoon
Class prefix to [myapp]-icon-
in this sample [myapp] is the identifier for your application

Sample Sample

Modify your font icon files

In order for moovapps to load your font icons files, you have to do the following actions :

  • modify the name of the font files in order to avoid to erase moovapps worplace icomoon font file
    • rename the style.css file to x-[myapp]-fonts.css
    • put x-[myapp]-fonts.css into custom\webapp\easysite-resources\skins\workplace\css directory
    • put fonts files into custom\webapp\easysite-resources\skins\workplace\fonts directory
      Warning

      It is important to prefix your css fils with an “x” character in order for this file to be loaded after workplace css file.

  • modify the content of the [myapp]-fonts.css :
    • change the font path from fonts to ../fonts

For Workplace11 and higher, you must change css class targeting like :

     .tile [class^="icon_"][class^="myapp-icon-"], 
     .tile [class^="icon_"][class*=" myapp-icon-"],
     .table-view [class^="icon_"][class*=" myapp-icon-"],
     div[data-vdp-sysname="selector-icon"]+[class^="icon_"][class*=" myapp-icon-"],
     .detail-selectable .reference [class^="icon_"][class*="myapp-icon-"] {
        ... }

Create the xml file that reference your icons

Now you can create an xml file that refence your icons

  • Create an xml file named custom/icon/[myapp]-icons.xml

the xml file must follow this format

<?xml version="1.0" encoding="UTF-8"?>
<iconCollection>
	<iconCategory label="LG_WORKPLACE_TILE_ICON_PACK" name="tiles">
		<icon label="[label]" value="[style name]"/>
		<icon label="[label]" value="[style name]"/>
	</iconCategory>

</iconCollection>

where [style name] is the name of your css class and [label] will be the label of the icon in the selector

Sample app

This app is a sample which add 2 icons (sad and happy) to icon selection :