Your brand is having fantastic icons, and you want to bring them to your living Style Guide. For this purpose, we have the Icon Smart Block. With a few steps, you can upload them to Frontify. This article shows you how you have to do it, and what kind of icon types could be used?

First, start the edit mode by pressing the pencil, or the shortcut "CMD + E".
Then click the add button.


Now click on "Icons".


Now the "Icon Block" was added to your page.
You've now got five tabs for the different types of icons.

  1. Icomoon
  2. Fontello
  3. Fontastic
  4. Custom
  5. SVG

IcoMoon

I will first show you how to add Icons created via IcoMoon.
If the tab Icomoon is not active, click on it, please.


Before we can upload Icomoon icons, we have to build an icon package over at icomoon.io. Open the URL in your browser, and click on the button "IcoMoon App".



After you entered the "IcoMoon App", you will see a lot of example icons.
First, we will select them all 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 our own 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 select the icons which you want to have in your download package. Or go over the hamburger menu. Click "Select all".


After you've selected the Icons, click on "Generate Font".


On the next screen, you see some information about your icons.
Click on download. An IcoMoon.zip 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 now uploaded and visible in Frontify.


Fontello

Over Fontello, it is the same way. 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.


The zip file can be uploaded over the Icon Block --> Tab Fontello.

After the upload, you will see them immediately.

Fontastic

The way over Fontastic is really the same. Here, you first have to create a login.
After that, choose your icons or upload and customize them.
The downloaded zip can be uploaded to Frontify over the Tab Fontastic.

Custom

If you have your own built icon zip package you can upload it over the
Icon Block --> Custom.
You can also download an example zip file here, to see how it has to be structured. 

In the zip file, you need to have a JSON file, a CSS folder, and a font folder.
The config.json file is looking 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 is having the relevant icon files "eot, SVG, ttf, woff" in it.
And the CSS, for example, is having six CSS files in it.
In our case:

animation.css
fontello-codes.css
fontello-embedded.css
fontello-ie7-codes.css
fontello-ie7.css
fontello.css 

The best thing to do is to download the demo file and have a look at it. You can customize the files according to your wishes, and use them.

SVG

If you want to use SVG Icons over Frontify, please use the following way.
At least you need a symbol-defs-svg file, which was created by your designer, and a short json file. For the json, please open a Text Editor and write the following in it:

{ }


Yes, only two "Curly brackets" are needed 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.


Did this answer your question?