Your brand has fantastic icons, and you want to bring them to your living Brand Guidelines using the Icon Block.
This article shows you how to upload your icons to Frontify and what icon types you can use.
First, start the edit mode by pressing the pencil or the shortcut "CMD + E."
Then click the add button and then on "Icon Webfont".
There are five tabs in the “Icon Webfont” block, depending on the different icon types.
Icomoon
Fontello
Fontastic
Custom
SVG
IcoMoon
Before uploading IcoMoon.io icons, you need to build an icon package. Open the URL in your browser, and click on the "IcoMoon App" button.
After you enter the "IcoMoon App," you will see an extensive icon library. To upload your icons, you need to select and remove them:
Click on the hamburger menu and click on "Select All."
Click again on the hamburger menu and click on "Remove Set."
Now we are ready to import your icon files.
Click on "Import Icons."
Choose your icon files from your finder/explorer and upload them.
Next, you will be asked to get your fonts metrics and metadata within the download.
Click "Yes" if you want that, or "No" if not.
Now you can manually pick the icons you want in your download package. Or go over the hamburger menu and select them all.
After you've selected the Icons, click on "Generate Font."
On the next screen, you see some information about your icons. Click on the download button at the bottom right of your screen, and an IcoMoon.zip file will be generated and downloaded.
Back in Frontify, click on the cube (upload) button or drag and drop the zip file into the box.
That's it. Your IcoMoon-generated icons are now uploaded and visible in Frontify:
Fontello
On Fontello, the process is similar to IconMoon; build up your Icon package and upload it over the icon block Fontello within Frontify.
Mark your icons, or upload your own SVG icons or SVG fonts.
After that, click on the "Download Webfont" button.
You can upload the zip file over the Icon Webfont Block - Tab Fontello.
After the upload, you will see them immediately.
Fontastic
The process on Fontastic is similar to the previous two. The only difference is that you need to create a log-in. After that, choose your icons or upload and customize them. You can upload the zip file to Frontify over the Tab Fontastic.
Custom
If you have your icon zip package, you can upload it over the Icon Webfont Block - Custom. You can also download an example zip file in the Custom Tab to see how it has to be structured:
In the zip file, you’ll find a JSON file, a CSS folder, and a font folder.
The config.json file looks like the following:
{
"name": "",
"css_prefix_text": "icon-",
"css_use_suffix": false,
"hinting": true,
"units_per_em": 1000,
"ascent": 850,
"glyphs": [
{
"uid": "9dd9e835aebe1060ba7190ad2b2ed951",
"css": "search",
"code": 59392,
"src": "fontawesome"
},
{
"uid": "bf882b30900da12fca090d9796bc3030",
"css": "mail",
"code": 59394,
"src": "fontawesome"
},
{
"uid": "9a76bc135eac17d2c8b8ad4a5774fc87",
"css": "download",
"code": 59397,
"src": "fontawesome"
},
{
"uid": "eeec3208c90b7b48e804919d0d2d4a41",
"css": "upload",
"code": 59398,
"src": "fontawesome"
},
{
"uid": "d35a1d35efeb784d1dc9ac18b9b6c2b6",
"css": "pencil",
"code": 59396,
"src": "fontawesome"
},
{
"uid": "bbfb51903f40597f0b70fd75bc7b5cac",
"css": "trash",
"code": 59395,
"src": "fontawesome"
},
{
"uid": "7e25a96981e6bd6b1592c409da293c45",
"css": "cloud",
"code": 59393,
"src": "websymbols"
}
]
}
The font folder contains the relevant icon files "eot, SVG, ttf, woff".
The CSS folder, for example, has six separate CSS files:
animation.css
fontello-codes.css
fontello-embedded.css
fontello-ie7-codes.css
fontello-ie7.css
fontello.css
We recommend downloading the demo file and having a look at it. You can customize the files according to your wishes and use them.
SVG
To use SVG Icons on Frontify, please follow this process.
You will need a symbol-defs-svg file - created by your designer - and a short json file. For the json, please open a Text Editor and write the following in it:
{ }
You only need two "Curly brackets" in it.
Save the file as selection.json.
Now zip the file and upload it to Frontify - Tab SVG.
It's so easy to have your icons in Frontify.
If you have any questions, please feel free to contact us.