Using Microsoft’s “Office UI Fabric” for icons

What is Office UI Fabric?

“Fabric uses a custom font for its iconography. This font contains glyphs that you can scale, color, and style in any way. You can even flip them for right-to-left localization. To use the icons, combine the base ms-Icon class with a modifier class for the specific icon” – http://dev.office.com/fabric/styles

Why use UI Fabric?
Assuming that the Fabric UI CSS contains the variation of icons that you require, you will not need to load the image alternative. Instead, you can reference the icons in a number of ways and have flexibility in size, colour and positioning. Additionally, you can integrate it into the SharePoint theminig engine in the same fashion you would adjust the colours of usual text, backgrounds and borders. To demonstrate how the icon integration works, I’m going to create a search box and search icon.

Search Box

Approach one – Using Fabric UI classes
The first approach is to include the fabric UI classes within your HTML.

As you can see, the span includes the following two classes:

  • ms-icon
  • ms-Icon–search

“.ms-icon” contains the basic details of the icon font as seen below.

“.ms-Icon–search” contains the content value of the search “icon” that I’ve chosen.

 

Approach two – Reference the class details in your own CSS
The alternate approach is to reference the CSS details in your own code if you’re unable to modify the HTML. The below example shows that the font-family  of the span is set to Office365Icons and the before content has been copied. This value was simply extracted from the UI Fabric CSS.

note: this assumes that you are loading the UI Fabric CSS file along with your own, or independently.

Integrate with the SharePoint theming engine
Another great benefit of incorporating fabric UI into your code is the ability to integrate the SharePoint theming engine to modify the colours on the fly. The below ensures that the span text / icon colour will always match the “ContentAccent1” colour specified within the “.spcolor” file of the composed look.

References: http://dev.office.com/fabric/styles

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s