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:
I’ll take you through the process to convert it to look like this, with custom icon’s:
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.
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
Step 2.2 – Trace bitmap
Press Ctrl + A, this will highlight the image.
From the menu select Path, then select Trace Bitmap
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.
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.
Highlight the rear image and select Delete.
Now select the vector and from the menu select Edit, then Resize Page to Selection.
You can now save the file by clicking File, then Save As. Select Plain SVG from the drop down and enter a title.
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.
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.
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.
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.
Step 3.4 – Download font
Once select, jump to the Publish tab and select Download which will start the download process.
Step 4 – Upload font into Sitecore
Navigate to the theme being used by your site and upload the files downloaded and publish them.
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.
Upload your custom CSS and publish