Tag Archive for Icons

Pimp your Add-in with the SharePoint Online Icon font

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 Winking smile. 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.

Screen Shot 2015-07-14 at 12.04.45

Icon @ 200% (Sharp)

Screen Shot 2015-07-14 at 12.05.15

Icon @ 400% (Sharp)

Screen Shot 2015-07-14 at 12.03.48

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!!

Custom Ribbon Action Icons in a SharePoint Hosted App

Today I learned something about Data URI’s and that there absolutely awesome! Especially for this particular practice. I was creating a Custom Action in my SharePoint Hosted app. I wanted to add a Button into the Ribbon of any Document Library that takes me to my App Web and do some work based on List Information. I started by adding a Custom Ribbon Action.

blog-ribbonaction2

blog-ribbonaction3

This is all pretty basic and out of the box stuff. The XML generated contains also the URL to my App Web using the token ~appWebUrl(~remoteAppUrl for auto-hosted / provider-hosted). Unfortunately this Token could not be used to link to an icon that should be displayed in the Ribbon with my Custom Action. Also by default the images are linked to the _LAYOUTS folder which we cannot write to from an App.

blog-ribbonaction41

Data URI to the Rescue

On the web I came across this post on Stack Overflow http://sharepoint.stackexchange.com/questions/57328/is-it-possible-to-package-deploy-and-use-my-own-image-for-a-ribbon-customactio which offers the perfect solution: Create a data URI for the icons. You can read about Data URI’s and even create your own out of an image right here: http://dataurl.net 

In my example I used the same image for 32 and 16 px.

blog-ribbonaction4

As we can see (this is just a snippet) the URL’s can become quite long, which is pretty ok for this particular use but can be a disadvantage if your using this everywhere in your website. There are some other drawbacks on this approach but still for this use I think this is very good and solid solution!

blog-ribbonaction5

Cheers!