For a developer I’m very sensitive to good design and branding of a Web Application, Site or Add-in. My SharePoint career started as a true MasterPage / CSS wizard 
. I also agree strongly with Microsofts vision on keeping the UX of the Office 365 products in line with the default branding that MS ships. When it comes to building Add-ins, a developer is very free in handling the branding of the Add-in. A good tool to keep the branding of your Add-in in line with the default Office 365 branding is making use of the Office 365 Icon font!
The Font
I first came across this when searching for vector graphics of the MS logo’s. I found this very helpful post by Stefan Bauer: http://www.n8d.at/blog/office-365-icon-font-documentation/
He made a neat little tool that instantly shows how to use this. When checking out the font I learned that this tool is not showing all the icons in the Font. So I created my own little reference site to display all the icons available:
http://spo365icons.azurewebsites.net/
Update: It seems that some visitors got an error saying:”Font from origin ‘http://cdn.sharepointonline.com’ has been blocked from loading by Cross-Origin Resource Sharing policy” and the font doesn’t load. I haven’t seen this myself and have no explanation for it unfortunately! I will come back here when I’ve got some more info.
How does it work?
Now why is using a font to display icons such a good tool? Webfonts are basically a collection of vector graphics that can be called using an HTML character code. You can use the HTML numeric value in HTML code or use the Hex code in CSS. To convert these values, here’s a simple tool: https://www.evotech.net/articles/testjsentities.html
You can copy/paste a symbol from my site and check the values in HTML. The CSS value is already provided.
Since HTML 5 supports these vector graphics and SVG file types and we all need to be responsive, using fonts to do this is a very easy way to get crisp icons and logo’s. This is because the size and color are very easy to manipulate with CSS. And this way your icon will always render sharp even on a very high resolution or when zoomed in! Click on the captures below to see the difference when zoomed in.
Icon @ 200% (Sharp)
Icon @ 400% (Sharp)
PNG @ 300% (Blurry)
Build your own!
Now what if you got some nice icons or logo’s yourself!? You can build a webfont for free on https://icomoon.io/ This awesome tool allows you to upload your custom icons (in SVG files) and configure everything your font needs like the name, CSS classes and where the character encoding starts.
Happy branding!!
