Typicons

The Open Roberta Lab uses Typicons on the front end site at various places, e.g to label menu items or robot systems. Because we use Typicons as a font at the frontend site, we have to extend the set of Typicons if we want to use custom icons. The following is a description of how we can extend the set.

1. check if there is no suitable icon in the set
2. 1. if no suitable icon is in the set, create a new one.
   2. read this documentation carefully and make sure you have a proper svg at the end
3. remember the location of your svg file to add. In best case, give it an appropriate name, e.g. for robot systems it has to be the name of the robot group, do not add any "typcion" extensions to the name, this will be done automatically.
4. 1. open the IcoMoon App and import the current set (best from the develop branch)
   2. open the menu at the right site of "Untitled Set" and choose "Import to set".
   3. navigate to your clone of the openroberta-lab/OpenRobertaServer/staticResources/css/font and select typicons.svg. All current typicons are now in the set "typicons"
   4. import the new icon now in the same way, but this time you select the newly created svg file. Now you have added your icon to the set.
5. 1. to use the new set in the openroberta-lab, we can generate a font out of the set.
   2. use the menu again and select "Select All".
   3. click on "Generate Font" (right bottom).
   4. configure your font by clicking on the gear wheel next to the "download" button.
   5. type "typicons" to the Font Name field (without quotation marks)
   6. type "typcn-" to the Class Prefix field (without quotation marks)
   7. close this popup and click on "download"
6. unzip the newly downloaded typicons
7. go to the unzipped folder and copy the 4 font files inside the "font" folder and replace the old ones in the openroberta-lab.
8. 1. go to the unzipped folder, open the "styles.css" file in an editor and copy the whole text. Open now the "old" typeicons.css file and replace the text with your copy.
   2. in line 13 you have now [class^="typcn-"], [class*=" typcn-"] {, change this to .typcn:before { and save the file.

Please check old and new icons, if there are visible in the lab. If yes, you are done, if not and only the new icon is not visible or not like the others it is very likely that the svg of the newly created icon does not match to the conditions of the documentation

Good luck!