Visual Studio icon font

As you can probably see from my blog posts, I'm not really a front-end guy. If push comes to shove, I can manage some basic css, js and html but it's not really my thing. But sometimes, push does come to shove.

As I was building the little promo website for my business, I found myself in need of a couple of icons for links to my Stackoverflow and Github profiles. FontAwesome is an awesome font library that provides these icons as fonts (and that's all I can tell you about it, I don't really know the exact magic), so I used that.

But I though it would be funny to add my Visual Studio Marketplace profile to the website as well (after all, it is a good reference if you have some tools up there).

Obviously, a good icon for that would be a Visual Studio icon, but unfortunately, there is no VS icon available in FontAwesome. I went to Github and saw that others need this too, but I didn't see this happening in the near future, so I had to get creative.

First I went online and searched for an icon in SVG format that can be used freely. And I found an SVG icon for Visual Studio Code in the Wikimedia Commons library that has a permissive license. Not exactly Visual Studio, but close enough (especially if you look at it in small).

Next I needed to transform this SVG image to a font-icon (icon-font?). I did a Google-search and found Fontastic, which does just this: you can upload your image, set some settings for you font (like css class names and stuff), and it generates everything you need.

So I went through the process and created the font from the VSCode SVG icon. I guess it's pretty decent:

So if you need this, please first head over to the Github issue in the FontAwesome repository and vote. But in the meantime, you can download everything you need from here (there's a sample html page in the package to help you get started).

Disclaimer: I hope that there are no licensing issues with the image, especially since I provided every source in the article. But if there is, please don't hesitate to contact me and I remove everything :)