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.
Quick 'n Easy 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.
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.
Note that this is only possible when the font includes a SVG version of the font!
Adding custom icon fonts
The default setup of Quick 'n Easy 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/Quick 'n Easy Web Builder/iconlibraries folder.
On newer Macs, the folder is: /Library/Application Support/Quick 'n Easy Web builder 9/iconlibraries
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"}
}
}
Note:
It is important that the folder name is the same as the font's name.