Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Azure Icon Font For Your Web Application

DZone's Guide to

Azure Icon Font For Your Web Application

How some Azure-specific fonts were created from scratch

· Cloud Zone
Free Resource

Site24x7 - Full stack It Infrastructure Monitoring from the cloud. Sign up for free trial.

For both the Cloud Portam website and application, when it comes to icons we don’t use images. Almost invariably, we use vector icons and icon fonts (like Font Awesome which BTW are very aptly named; they are indeed really-really awesome :)).

Where Font Awesome didn’t work for us was icons for Azure-specific things. In the past, we were helped by Jigar Patel, who works with my good friend Dinesh Agarwal (who BTW runs an awesome startup called Pro Start Me... do check it out!). But given that Azure is adding a new service almost every month, I felt a bit awkward going to Jigar and Dinesh to ask for new icons (not that they would have said no... but I remembered that story: teach a man to fish :)). So this time I thought I will give it a try myself!

The icons are alive and kicking on Cloud Portam’s website at http://cloudportam.com/azure-icon-font. Check them out!

This blog post talks about how I created these icons. For a creatively challenged individual like me whose favorite color is either blue or grey :), it was quite an experience!

Step 1: Download the Visio Files

To begin with, I did not create these icons from scratch! The content team from Microsoft has already done a marvelous job of creating Azure architecture diagrams which are available for you to download and use them in your own presentations, drawings and whatnot. You can download them from here: https://azure.microsoft.com/en-us/documentation/articles/architecture-overview/#symbol-and-icon-sets (direct download link: http://aka.ms/CnESymbols). Download the zip file and extract it. Once you have extracted the files, you would want to go to “CnE_VisioStencils” folders and open “CnE_CloudV2.22.vss” file in Visio. This is where the magic happens :).

image

image

Step 2: Create SVG Files

Next step is creating SVG (Scalable Vector Graphics) files for these symbols. Now you can do it either the hard way or the easy way :).

Step 2.1: Create SVG Files – The Hard Way

Visio has this functionality where you can export each item in the stencil to SVG format manually (thus, “The Hard Way”). To convert an item in the stencil to SVG format, select that item, then right click to “Edit Master” context menu item to “Edit Master Shape”.

image

Even though you don’t see anything on the subsequent screen, just go ahead and save it as a SVG file using File and then Save As.

image

Once the file is saved as SVG file, you should be able to load that file in the browser and see how it looks!

image

Pretty simple, huh!

But there are about 100 or so shapes and converting them would take a lot of time! In fact, this is how I started but after I converted about 5 or 10 of the shapes I thought there must be a better way of doing things. That’s when I figured out the easy way.

Step 2.2: Create SVG Files – The Easy Way

What’s the easiest way for programmers like us to solve a problem? Write code, obviously :). So I thought, there must be a way to create these files programmatically. A little bit of searching led me to a few questions on Stack Overflow and MSDN documentation and based on that I wrote a console app which takes a shape and exports it in SVG format. Now, that’s simple! Here’s the code I used:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Office.Interop.Visio;
namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            Application app = new Application();
            app.Visible = false;
            var doc = app.Documents.Add("D:\\CnE_CloudV2.22.vss");
            foreach (var item in doc.Masters)
            {
                var masterItem = (Master) item;
                var fileName = @"D:\Azure Icons SVG\" + masterItem.Name.Trim().Replace("\r", "").Replace("\n", "") + ".svg";
                if (File.Exists(fileName))
                {
                    File.Delete(fileName);
                }
                var shapes = masterItem.Shapes;
                foreach (var item2 in shapes  )
                {
                    var shape = (Shape) item2;
                    shape.Export(fileName);
                }
            }
            Console.WriteLine("Done....");
            Console.ReadLine();
        }
    }
}

Step 3: Create Icon Font

The last step in the process is to create the icon font. Again, I didn’t do anything special :). I just used IcoMoon’s Font creator app – https://icomoon.io/app/#/select. Simply head over there, select all the SVG files by clicking on “Import Icons”, select the icons you want to include in the font and then click “Generate Font” to create your own font icon!

image

It’s as simple as that. Now the imported SVG has some quirks and you may have to edit the SVG icons a little bit before you actually create the font, but that’s minor stuff. Most of the heavy lifting is done by this app for you.

Once you download the font, you get everything you need to get going, even a demo HTML file that you can use as a reference.

Download

If you don’t want to go through the trouble of doing all of this, the work I have created is available for you to download. You can download it from Cloud Portam’s website at: http://cloudportam.com/azure-icon-font.

Go ahead, download it and use it in your web application! Be sure to let me know your feedback. I know they are not perfect but I think it’s a good starting point. If something is not working out for you, do let me know and I will try my best to get it fixed.

Site24x7 - Full stack It Infrastructure Monitoring from the cloud. Sign up for free trial.

Topics:
azure ,font ,cloud ,design ,svg ,azure icon ,azure font

Published at DZone with permission of Gaurav Mantri, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}