E-Tabs

Using Fonts To Get Customisable Icons

A key component in any dashboard or infographic is icons. Whether you need an icon for a button, a header or infographic image, getting the right icon is always a time consuming and tiresome task.

In the past, we would trawl the web looking for inspiration then often spend a lot of time and effort creating our own icons. As anybody who has done this will tell you, this is not the easiest thing to do, especially for images that have a lot of complicated fiddly bits. There are many websites that offer downloadable icons, but these either come with a cost, or don’t provide every image in every possible size and colour.

Recently we have started using icon fonts to produce our icon images. “What’s an icon font?”, I hear you ask.

Think Windings. It’s a font in which the characters are icons. These have been developed for use on the web; however they can also be used for creating PNG images of any size, colour and background. Because the icons are technically text, it is much easier to customise them.

Two of our current favourites are fontAwesome and icofont, but there are many more out there.

Below is how we do it, the same technique should work with any other icon fonts that you may find.

 Install the font on your computer

  1. Download the file from the website.
  2. Within the downloaded zip file, find the .ttf file, double click and install it.

Image 1

3. The font will now be available to all programs on your computer.

Note: If any programs are already open when you installed the font, you will need to close and re-open them before it becomes available to them.

Using the font to produce images

  1. From your start screen, search for and open character map.

Image 2

2. Change font the dropdown at the top to the one you want to use.

Image 3

3. Single click on the icon you want and then click select, or double click the icon you want.

Image 4

4. Click Copy.

5. Open PowerPoint and paste into a slide. The icon will now be in PowerPoint, as text within a textbox.

Image 5

6. You can now rotate the text box to rotate the icon. You can change the icon size by changing the font size, and you can change the icon colour by changing the font colour.

Image 6

You can change the background colour by using the Shape Fill button.

Image 7

 

If you don’t change the colour, the background of the image will be transparent. This is probably the best option as you can place your image over any background within your dashboard or infographic.

7. Right click on the object and select ‘Save as Picture’.

Image 8Note: if you right click on text you can’t save as picture. In order to select the text box, move your mouse to the edge of the box and then right click. You will know that you are in the right place because the mouse cursor will change to the four-arrow symbol.

8. In order to easily find the right icon for your purposes, you can search on the font’s website. Once you have found the icon you want, the website will provide you with a Hex or Unicode value for that character. Clicking ‘Advanced View’ in Character Map will allow you to search for a particular icon by putting its Hex or Unicode value into the ‘Go to Unicode’ box.

Image 9

 

Note: Ensure you are using the ‘Go to Unicode’ box and not the ‘Search for’ box.

And that’s how we do it!

We’d love to hear your comments and feedback on this, perhaps you have a better way of getting customisable icons that we’ve not yet discovered!

And if you would like to talk to us about interactive dashboards or any data visualization requirements please fill out the form below and we’ll be in touch.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *