Icon Fonts

Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. Icon fonts can be styled with CSS in the same way you style regular text which has made them a popular choice on the web. Icon Fonts are vector graphics, so they are scalable without affecting the quality.
Adding custom icon fonts
The default setup of WYSIWYG Web Builder includes Google Material (https://material.io/icons), which has more than 900 unique icons.
However in the latest version we have added support for third party or custom Icon Font Libraries.

The font files should be placed in a sub folder of the \Documents\WYSIWYG Web Builder\system\iconlibraries folder.
Besides the fonts files, the folder should also have a json file which contains information about the icons in the font in order to properly name the icons.
{
   "icons":
   {
      "unicode here without \ or extra characters":
      {
          "name" : "name of the icon"
      }
   }
}


Example:
{
   "icons":
    {
       "e88a": {"name":"Home"},
       "e8cc": {"name":"Shopping Cart"}
    }
}
Icon Font Object
This object can be used to easily add Google Material (vector) or other Icons fonts. The object supports hover, backgrounds, events, links, CSS3 animations and more.
Publish as svg
This will output the icon as embedded SVG (scalable vector image) instead as font. This greatly reduces the overall size of the website if you only use a few icons.
WYSIWYG Web Builder has a dedicated object for Font Awesome, a popular icon library with many styling options. However, it is also possible to add your own or third party icon fonts by using the "Icon Font" object.
Note:
It is important that the folder name is the same as the font's name. If you do not know the exact name then you can look this up via the  properties of the TTF properties (Details -> Title in Windows File Explorer).
We have created add-on packages for the following icon fonts:
Drip Icons
Elusive Icons
Feather
Foundation Icons
Glyphicons Halflings
Ionicons
Line Awesome
Material Icons
Open Iconic
Linea Icons

The Icon Fonts add-ons can be downloaded from the website:
http://wysiwygwebbuilder.com/free_extras.html