PortiBlog

Office Fabric UI: Just use the font-set!

15 januari 2018

Microsoft has made an effort to create a standard framework for building apps and websites called Office UI Fabric. This framework provides standard theming, grids, styles and icons. However a lot of developers prefer other frameworks like the more well-known Bootstrap which does basically the same thing. The only thing is... the cool O365 icons aren't included in Bootstrap. You can use Office UI Fabric inside aBootstrap project, but that will add hundreds of files just so you can use some fonts.

The font that is used is the Segoe MDL2 font-set that comes standard with Windows 10. And luckily someone has taken the time and effort to make it a CSS and font Toolkit. It is based on the Font Awesome method so you can use techniques like font-stacking and font animations. It's made by Microsoft MVP Scott Dorman and it can be found here.

Now this handles 80% of the needed icons, but there are some O365 specific icons like the waffle and app-icons. These are not provided in the font, but you can embed them directly in CSS.

Just include the CSS code below and you can use these O365 specific icons.

How do I include the O365 specific icons?

To include say, a waffle icon, just use the following code:

<i class="mdl2-2 mdl2-2-Waffle"></i>

 

@font-face {

font-family: 'ShellFabricMDL2Icons';

src: url(data:application/font-woff;base64,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) format('woff');

font-weight: normal;

font-style: normal

}

.mdl2-2 {

display: inline-block;

font-family: ShellFabricMDL2Icons;

font-style: normal;

font-size: inherit;

text-rendering: auto;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.mdl2-2-GlobalNavButton:before {

content: "\e700 "

}

.mdl2-2-More:before {

content: "\e712 "

}

.mdl2-2-Settings:before {

content: "\e713 "

}

.mdl2-2-People:before {

content: "\e716 "

}

.mdl2-2-Search:before {

content: "\e721 "

}

.mdl2-2-Forward:before {

content: "\e72a "

}

.mdl2-2-Back:before {

content: "\e72b "

}

.mdl2-2-ChevronLeft:before {

content: "\e76b "

}

.mdl2-2-ChevronRight:before {

content: "\e76c "

}

.mdl2-2-Emoji2:before {

content: "\e76e "

}

.mdl2-2-Contact:before {

content: "\e77b "

}

.mdl2-2-Calendar:before {

content: "\e787 "

}

.mdl2-2-News:before {

content: "\e900 "

}

.mdl2-2-Download:before {

content: "\e896 "

}

.mdl2-2-Help:before {

content: "\e897 "

}

.mdl2-2-ChromeClose:before {

content: "\e8bb "

}

.mdl2-2-OneDrive:before {

content: "\e941 "

}

.mdl2-2-ChevronUpMed:before {

content: "\e971 "

}

.mdl2-2-ChevronDownMed:before {

content: "\e972 "

}

.mdl2-2-Ringer:before {

content: "\ea8f "

}

.mdl2-2-StoreLogo:before {

content: "\ea96 "

}

.mdl2-2-CircleFill:before {

content: "\ea3b "

}

.mdl2-2-HelpMirrored:before {

content: "\ea51 "

}

.mdl2-2-Lightbulb:before {

content: "\ea80 "

}

.mdl2-2-BingLogo:before {

content: "\eb6b "

}

.mdl2-2-MSNLogo:before {

content: "\eb6c "

}

.mdl2-2-OfficeLogo:before {

content: "\eb6e "

}

.mdl2-2-SkypeLogo:before {

content: "\eb6f "

}

.mdl2-2-PowerBILogo:before {

content: "\ea1e "

}

.mdl2-2-YammerLogo:before {

content: "\ed19 "

}

.mdl2-2-AdminALogo:before {

content: "\ed6a "

}

.mdl2-2-AdminPLogo:before {

content: "\ed71 "

}

.mdl2-2-ParatureLogo:before {

content: "\ed7b "

}

.mdl2-2-SocialListeningLogo:before {

content: "\ed7c "

}

.mdl2-2-Waffle:before {

content: "\ed89 "

}

.mdl2-2-BookingsLogo:before {

content: "\edc7 "

}

.mdl2-2-DocsLogoInverse:before {

content: "\edcb "

}

.mdl2-2-Dynamics365Logo:before {

content: "\edcc "

}

.mdl2-2-DynamicSMBLogo:before {

content: "\edcd "

}

.mdl2-2-OfficeStoreLogo:before {

content: "\edcf "

}

.mdl2-2-PlannerLogo:before {

content: "\edd1 "

}

.mdl2-2-OfficeAddinsLogo:before {

content: "\eec7 "

}

.mdl2-2-ClassroomLogo:before {

content: "\ef75 "

}

.mdl2-2-CaretSolidDown:before {

content: "\f08e "

}

.mdl2-2-PowerAppsLogo:before {

content: "\f091 "

}

.mdl2-2-SkypeForBusinessLogo:before {

content: "\f0fc "

}

.mdl2-2-AnalyticsLogo:before {

content: "\f1de "

}

.mdl2-2-WordLogo:before {

content: "\f1e3 "

}

.mdl2-2-ExcelLogo:before {

content: "\f1e5 "

}

.mdl2-2-OneNoteLogo:before {

content: "\f1e7 "

}

.mdl2-2-OutlookLogo:before {

content: "\f1e9 "

}

.mdl2-2-PowerPointLogo:before {

content: "\f1eb "

}

.mdl2-2-TeamsLogo:before {

content: "\f27b "

}

.mdl2-2-SharepointLogo:before {

content: "\f27e "

}

.mdl2-2-DelveLogo:before {

content: "\f280 "

}

.mdl2-2-OfficeVideoLogo:before {

content: "\f282 "

}

.mdl2-2-VisioLogo:before {

content: "\f2a7 "

}

.mdl2-2-MoreVertical:before {

content: "\f2bc "

}

.mdl2-2-StreamLogo:before {

content: "\f329 "

}

.mdl2-2-OfficeFormsLogo:before {

content: "\f434 "

}

.mdl2-2-ProjectLogo32:before {

content: "\f47e "

}

.mdl2-2-SwayLogo32:before {

content: "\f482 "

}

.mdl2-2-ClassNotebookLogo32:before {

content: "\f486 "

}

.mdl2-2-StaffNotebookLogo32:before {

content: "\f48c "

}

.mdl2-2-KaizalaLogo:before {

content: "\f492 "

}

.mdl2-2-TaskLogo:before {

content: "\f493 "

}

.mdl2-2-ProtectionCenterLogo32:before {

content: "\f494 "

}

.mdl2-2-NonprofitLogo32:before {

content: "\f495 "

}

.mdl2-2-GallatinLogo:before {

content: "\f496 "

}

.mdl2-2-MicrosoftFlowLogo:before {

content: "\f4b1 "

}

.mdl2-2-BusinessCenterLogo:before {

content: "\f4b2 "

}

.mdl2-2-ToDoLogoInverse:before {

content: "\f4bc "

}

.mdl2-2-Mail:before {

content: "\f715 "

}

.mdl2-2-MicrosoftStaffhubLogo:before {

content: "\f130 "

}

Submit a comment