Your brand has fantastic icons, and you want to bring them to your living Style Guide.
You can do this using the Icon Block.

With a few steps, you can upload your icons to Frontify. This article shows you how to do it, and what kind of icon types can be used.

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


Now click on "Icon Webfont".


The "Icon Webfont" block has been added to your page.

There are five tabs for the different types of icons.

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

IcoMoon

The first tab is IcoMoon.


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

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.


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

After the upload, you will see them immediately.

Fontastic

The way on Fontastic is similar as well. 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 has the relevant icon files "eot, SVG, ttf, woff" in it.
The CSS, for example, has 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 on Frontify, please follow this process.

You will 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?