How to export Wingdings characters with biExport

I have recently had a chat with one of our customers who used characters of the "Wingdings" in their Design Studio application.

When they wanted to export this application, the characters did not show up in the generated document.
Here is the reason and how you can solve this issue.

Application content

First of all, the Wingdings font is a Microsoft proprietary font, not a W3C standard:

This is why browsers like Firefox, and eventually also our engines to generate PowerPoint, Word or PDF documents, do not support these characters.

To alter the rendering of the Wingdings characters so they will be displayed in all browsers and export documents, you have to switch to unicode cahracters:

1. Find the corresponding UNICODE character to the WINGDINGS character.

   This site is very useful for this:
   http://www.alanwood.net/demos/wingdings.html

   Example:
   Character Code 115 --> Unicode 25C6

2. Create a CSS class with a before selector in the Custom CSS file of your applciation. Reference the unicode character with a prepent "\".

   Example:
   .ICON_TEST:before {
font-family: 'Arial';
content: '\25C6'
}

3. Characters, which are used in components of your aplication, can now be created by referencing the CSS class:

Custom Components

Our customer even used Wingdings in Custom Components. If you are doing the same, you can also follow steps 1 and 2 above.

Then instead of typing the Wingdings character, create an empty span and reference the CSS class in its attributes.

Have fun creating export documents with biExport!

Thilo