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.
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.
Using reset app bar icon, you can switch and reset mapping either to PUA or glyph mapping.
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.
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.
If you edit the name of the icon, name it appropriately so that you can easily refer it from CSS.
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.
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.