Export Icon Font through Metro Studio

Icon Font can be exported only through a project. To know how to create a project, click here.

Convert into Font

• The newly created project will be shown in the right corner of the Project segment area.
• Hover over it, and you will see three actions buttons sliding over the project i.e. Edit, Create Font and Explore.

• Click the create font appbar icon.

• This generates all the icons in the project into font, and can be previewed in the font editor window.

Customization

By default, the icons are assigned to a series of PUA (Private Use Area), starting from e900 and icon name. You can change the PUA and icon name by clicking the consecutive texts. The icon name is part of the class name, followed by the suffix given by you in the CSS setting. We will go through this later in the document.

Character Mapping

Using reset app bar icon, you can switch and reset mapping either to PUA or glyph mapping.

NOTE

When you reset the mapping to glyph, the icons will be assigned to 128 basic Latin characters (52 Latin characters and 76 common characters) starting from Latin characters followed by common characters. If the number of icons are more than 128, then the first 128 icons are mapped to glyph, and the rest of the icons are mapped to PUA.

CSS

To view and edit the basic CSS properties, click ,the CSS app bar icon.

In CSS properties, you can:

• Set prefix and postfix for the class.
• Choose the CSS selector.

Class name for a glyph would be class prefix, followed by icon name or icon name followed by class postfix.

TIPS

If you edit the name of the icon, name it appropriately so that you can easily refer it from CSS.

For example:

Export

Once done with the settings, click the generate icon font . A popup appears, where you can choose the location and assign the font name of the icon.

How to use Icon Font

A project folder is exported to the chosen location. In the folder, you will find the following files. You can use Icon Font by installing the font file or by using HTML and CSS.

In the fonts folder, you will find TTF (True Type font file), WOFF, EOT and SVG file formats.

Using HTML and CSS

In the embed font in the CSS folder, you will find the HTML and CSS files.

In style, the TTF font is embedded by using Base64 conversion. You can explore the code in the CSS file.

NOTE

This CSS file is enough to generate the Icon Font in the browser. There is no need to refer to the TTF, WOFF, EOT, or SVG files.

Run the demo HTML through any browser like Mozilla, Chrome, IE, etc.

Without Embedded Font in CSS

In the style CSS (present in the project folder), we have referred the TTF, WOFF, EOT and SVG font by using SRC property.

Run the demo HTML file in the project folder. You will get the same output as base 64 conversion.