Adding custom icon fonts to a Sitecore Form to create a great customer experience

Lately I’ve been working with some high impact feature of Sitecore that don’t often get highlighted how easy they are to use and configure without the need for a developer. This post is going to outline how to create a custom font of icon’s used in a Sitecore Form which acts as a questionnaire to ask visitors about their interests. The majority of the post is focused  on the process of creating the custom icon font, the Sitecore steps are minimal.

One of the standard forms I work with starts off looking like this:

image

I’ll take you through the process to convert it to look like this, with custom icon’s:

image

Before I get into ‘the how’, let me explain ‘the why’ – Icon fonts are a modern way of using iconography. They are performant, play well with CSS styling, are cross browser compatible and will save you time and effort. Some more detailed benefits include:

1. Performance – As a font file is very small it means that there is a need for just one HTTP request on the server.

2. Aesthetics – Because, icon font characters are vectors, this means that they look well even in high pixel-density displays.

3. Change of the size – Another great advantage is that the size of these icon fonts can be changes in a few minutes, and there is no need for Photoshop

4. Effects – Any CSS effect that is applicable to fonts, for example text-shadows, can also be applicable for font icons.

5. Workflow effectivity – no need to generate sprites and manually position various sized images which saves time and efforts.

Step 1 – Find images you wish to convert to icons

For me this started with a google search for black and white images, save the image to file once found.

image

Step 2 – Convert image to vector

My usual image editing software of choice is paint.net, previously I’ve used gimp. Unfortunately paint.net doesn’t support working with vector images which are need for this process but in a pain.net forum their were many recommendations for the use of Inkscape.

Step 2.1 Open image in Inkscape

Select File from the menu, then Open e.g. nissan.jpg

image

Step 2.2 – Trace bitmap

Press Ctrl + A, this will highlight the image.

From the menu select Path, then select Trace Bitmap

image

Once the dialog appears, click Update and you should see the image displayed. If you don’t, click into the background and press Ctrl + A, whcih will highlight the image.

image

Click OK. Only press the button once.

In the background the vector of the image has been created and is highlights.

We now need to delete the original image (not the new vector) by first moving the vector to the side. Since the vector is highlighted after this process is should be easy to move. You can tell if you have the vector highlighted because the white space should be transparent.

image

Highlight the rear image and select Delete.

Now select the vector and from the menu select Edit, then Resize Page to Selection.

image

You can now save the file by clicking File, then Save As. Select Plain SVG from the drop down and enter a title.

image

Step 3 – Create your icon font file

For this step we will be using a free online service called http://fontastic.me/.

Step 3.1 – Create new font

Once logged in, use the New Font and Modify Font buttons to manage your new font. Clicking New Font doesn’t bring up a dialog to allow you to enter a name for your new font so you will need to use the Modify Font button\process.

image

Step 3.2 – Import icons

Now we will add the icons by selecting Add More Icons from the top menu, followed by selecting Import Icons, then navigate to the vector from the previous step.

image

Once added you can go back to the Home page and see your icon. From this page you can change the name of the icon set and also add additional icons.

image

Step 3.3 – Select icons

From this page you can search for different icon, from which you will need to select the ones you want included in your font file.

image

Step 3.4 – Download font

Once select, jump to the Publish tab and select Download which will start the download process.

image

Step 4 – Upload font into Sitecore

Navigate to the theme being used by your site and upload the files downloaded and publish them.

image


Step 5 – Modify CSS to apply your new font icons

Use Firefox and the style editor to construct your CSS file to target the necessary page elements.

image

Upload your custom CSS and publish

image

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.