SVG font icons with Kentico 8

Help your clients navigate their content trees in Kentico 8 with snazzy custom SVG icons. We'll show you how to create them here.

Picture of Michael Kinkaid

By Michael Kinkaid, CTO

November 20, 2014

Share

I'm working on a project with a lot of custom Page Types. We like to create custom icons for these as it helps the client visually navigate the content tree. In previous versions of Kentico this was done with images. Fire up Photoshop, roll your own icon, export to PNG and job done.

Things are a little different with version 8+. Kentico is now using a CSS icon font to display graphics. Icon fonts have been around for a while. Our designers and front end developers are all rather keen on the flexibility they bring when it comes to scaling. No more exporting the usual suspects (16px by 16px, 24px by 24px, 32px by 32px... yawn). Now there's nothing stopping you from continuing with image files — nothing but the nagging suspicion that Kentico have left his approach behind and you might want to as well.

Kentico has an article on how to create these icons. A few things weren't obvious to me, so I thought I'd write up the steps I took.

Make pretty SVG files

First thing you are going to want to do is create some vector graphics for your icons. Adobe Illustrator will do the job, or if you want a freebie you can grab something like iVinci Express on the Mac, InkScape for Windows, or if you want an online tool then check out YouiDraw which works with Google Drive.

A flat icon design being drawn in the program iVinci Express
  1. Keep things simple and go with a flat icon design. This will fit in with the rest of Kentico's UI.
  2. Export your lovely icon to an SVG file.

Create the font files

The Kentico article directs the reader to IcoMoon. This is a pretty cool tool for managing your icon sets and generating the necessary assets for your custom fonts. If you are using the free version (which I was) then be careful — your projects only get stored in your browser's cache. Empty your cache and bye-bye projects.

  1. Create a new project.
    A menu bar showing the user in the process of creating a new project in IVinci Express.
  2. Click "Import Icons" and upload your SVG files.
    The Materials tab of iVinci Express.
  3. Select the icons that you want to be part of your custom font file.
  4. Click on "Generate Font" at the bottom. You should end up here.
    A Save Menu in iVinci showing tabs for Quick Usage and Glyphs.
  5. Here are the "gotchas." Click on "Preferences" and at minimum set the class prefix to "custom-". Then click on "Codes" and reset them to start at something like "e500". IcoMoon by default will start around "e600" but codes this high are already taken by Kentico.
    An iVinci menu tab showing Reset Codes.
  6. Click "Download" at the bottom by the "Font" button.
  7. You should end up with a zip file.

Add your icons to Kentico

Here's my complete file:

  1. Extract the zip and you get the following:
    An extracted zip containing: 2 folders named demo-files and fonts; and 4 files named demo.html, Read Me.txt, selection.json, and style.css
  2. Grab the font folder and put it into "CMS\App_Themes\Default\Custom\". Create the custom folder if it is not already there.
  3. Put the style.css file into the "fonts" folder at "CMS\App_Themes\Default\Custom\fonts". You should end up with this:
    A Windows Explorer screen showing 5 files: icomoon.eot, icomoon.svg, icomoon.ttf, icomoon.woff, and style.css
  4. Now edit style.css. What we need to do is:
    - Remove the paths from all the src:url paths within @font-face
    - Add ".cms-bootstrap" - .cms-bootstrap [class^="custom-"], .cms-bootstrap [class*=" custom-"]
    - Ensure you also have custom- and not icon- by the icon selectors. If you didn't change your preferences in IcoMoon then this could trip you up.
    - Check that your codes don't start at "\e600".
    Here's my complete file:
    CSS from the style.css file.
  5. Open Visual Studio and add the files to your project if you are using the Web Application model.

Use a custom font!

Now that your custom fonts are setup you can use them. Here is an example with a custom Page Type.

  1. Go to the Page Type application and edit your custom Page Type
  2. Under the General tab set the Page type icon to Font icon class.
  3. Enter the class name of the icon you want to use e.g. custom-SomethingOrOther.
  4. Save your edit.
  5. Go check out the content tree in the Pages application! All being well, you should see your new icon:
    Shows a new SVG icon in the Kentico document tree.

All being well you should have a nice new font icon that can scale up to any size via CSS!