Icons

Impreza comes with entire Font Awesome icons and Material icons integrated, you can use them in content elements, header elements, grid layouts and in any other cases as part of a text on all Impreza-based sites.

Font Awesome Pro #

Impreza has built-in Font Awesome PRO icons, which include:

  • additional hundreds of icons
  • 3 styles including a Light style of all icons
  • more icon packs in the future releases

You're able to use Font Awesome PRO icons for free on every site built via Impreza theme. For several sites, you need to buy several Impreza regular licenses regarding Envato.

Material icons #

Material icons web font icons created by Google to follow Material Design trends.

Applying icons #

Impreza theme elements have a special-designed control to set icon.

Select 1 of 5 icon styles, find the suitable icon on the Font Awesome site or Material icons site, copy the wanted icon name and paste it into the field, after that you'll see the icon preview:

2278.png

Adding an icon to a menu Item #

When you add a FontAwesome icon, you always need to use a prefix with the full icon name, the proper name can be found on a page of a particular icon. For example, to add a star icon, go to its page on the Font Awesome site and copy it there

2279.png

When the icon name has no prefix, it will be always interpreted as a Material icon. Add an icon to your menu items by adding the following code to the "Navigation Label" field

for FontAwesome icons:

<i class="fas fa-star"></i>

or for Material icons:

<i class="material-icons">star</i>

2280.png

Fallback icon font #

In case you don't use Font Awesome icons, it's recommended to disable them in the "Optimize JS and CSS size" option. So that your site won't load heavy font files and will load only a 5 KB fallback font file fa-fallback.woff, which is needed for built-in icons, like prev/next arrows. The fallback font contains the following icons:

2433.png