Introduction
#

I recently came across an interesting blog – http://www.n8d.at/blog/office-365-icon-font-documentation/ which mentions O365 icons. This was back in February so when I attempted to locate these fonts so I could use them in some of my work. I could not located the file on the CDN that was mentioned. I kind of shrugged it off for a while but recently needed the icons again. So I went digging inside O365 and I found them. They are there if you want to use them. I’ll show you what classes to use. I also pulled the files which I’ll provide a link to at the end of the blog so you can download them and use them and not have to worry about CDN’s.
I found all the O365 icon inside my O365 Portal. I downloaded the web fonts and a portion of the css file that has the code for the icons. Using this approach you would be locked into the current icon. Microsoft is likely to continually update the icon & css, so this set would eventually become stale. If there ever is an official CDN I’d switch to that. If you’re on office 365 you don’t need to link to any fonts or css. You are able to just take advantages of the icons immediately you just need to look at my chart to see the classes or determine the code for the css content. If you don’t understand anything about using web fonts or what office 365 icons are, read the blog I mentioned above. That should bring you right up to speed.

Installation
#

copy the css & font folder to your on prem site
link to the css file in your masterpage or page (adjust path as needed)
you can implement one of the icons using something like this below
i have additional styles for color, font size, and spacing. view the source to check that out

Explanation of the Grid
#

the orange tiles are icons that are available by using the css:after { content: ‘code’; } or if you copy the supplemental css above
the blue tiles are icons that have classes in O365. you can use those classes in directly on your o365 site without attaching any styles or fonts
the black tiles are dead, meaning they don’t show or are not in the font package but may be in the official css and have not been purged.

The concept of using fonts for icons is nothing new and if you are not exactly familiar with that check out Font Awesome or Glyphicons. The concept is that fonts will scale nice, the are light weight and fully loaded once when you hit the site. You can easily resize them and re-color them. No need for messing around with images.