Office Fonts

Installation

copy the css & font folder to your on prem site
link to the css file in your masterpage or page

<link href='css/o365-icons.css' rel="stylesheet" type="text/css" />

you can implement one of the icons using something like this below

<span class='wf wf-family-o365 wf-o365-sharepointlogo'></span>

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.

.wf-o365-e000 content: '\e000'

.wf-o365-placeholder content: '\e001'

.wf-o365-e002 content: '\e002'

.wf-o365-e003 content: '\e003'

.wf-o365-plus content: '\e004'

.wf-o365-e005 content: '\e005'

.wf-o365-question content: '\e006' content: '\e006'

.wf-o365-e007 content: '\e007'

.wf-o365-people content: '\e008'

.wf-o365-mail content: '\e009'

.wf-o365-maillogo content: '\e009'

.wf-o365-circleinfo content: '\e00a'

.wf-o365-circleexclamation content: '\e00b'

.wf-o365-circlecross content: '\e00c'

.wf-o365-e00d content: '\e00d'

.wf-o365-peoplelogo content: '\e00e'

.wf-o365-e00f content: '\e00f'

.wf-o365-bell content: '\e010'

.wf-o365-calendar content: '\e011'

.wf-o365-scheduling content: '\e012'

.wf-o365-event content: '\e013'

.wf-o365-e014 content: '\e014'

.wf-o365-e015 content: '\e014'

.wf-o365-cloud content: '\e016'

.wf-o365-chat content: '\e017'

.wf-o365-e018 content: '\e018'

.wf-o365-e019 content: '\e019'

.wf-o365-e01a content: '\e01a'

.wf-o365-e01b content: '\e01b'

.wf-o365-e01c content: '\e01c'

.wf-o365-e01d content: '\e01d'

.wf-o365-e01e content: '\e01e'

.wf-o365-e01f content: '\e01f'

.wf-o365-hamburger content: '\e020'

.wf-o365-e021 content: '\e021'

.wf-o365-sites content: '\e022'

.wf-o365-phone content: '\e023'

.wf-o365-e024 content: '\e024'

.wf-o365-save content: '\e025'

.wf-o365-e026 content: '\e026'

.wf-o365-edit content: '\e027'

.wf-o365-e028 content: '\e028'

.wf-o365-e029 content: '\e029'

.wf-o365-miniatures content: '\e02a'

.wf-o365-e02b content: '\e02b'

.wf-o365-e02c content: '\e02c'

.wf-o365-e02d content: '\e02d'

.wf-o365-e02e content: '\e02e'

.wf-o365-e02f content: '\e02f'

.wf-o365-e030 content: '\e030'

.wf-o365-e031 content: '\e031'

.wf-o365-e032 content: '\e032'

.wf-o365-e033 content: '\e033'

.wf-o365-e034 content: '\e034'

.wf-o365-gear content: '\e035'

.wf-o365-smiley content: '\e036'

.wf-o365-e037 content: '\e037'

.wf-o365-e038 content: '\e038'

.wf-o365-search

.wf-o365-reversedquestion

.wf-o365-e03b content: '\e03b'

.wf-o365-e03c content: '\e03c'

.wf-o365-e03d content: '\e03d'

.wf-o365-e03e content: '\e03e'

.wf-o365-e03f content: '\e03f'

.wf-o365-tasks content: '\e040'

.wf-o365-check content: '\e041'

.wf-o365-cross content: '\e042'

.wf-o365-e043 content: '\e043'

.wf-o365-thumbup content: '\e044'

.wf-o365-ellipsis content: '\e045'

.wf-o365-e046 content: '\e046'

.wf-o365-e047 content: '\e047'

.wf-o365-e048 content: '\e048'

.wf-o365-leftarrow content: '\e04a'

.wf-o365-rightarrow content: '\e04b'

.wf-o365-e04c content: '\e04c'

.wf-o365-e04d content: '\e04d'

.wf-o365-e04e content: '\e04e'

.wf-o365-e04f content: '\e04f'

.wf-o365-upcarat content: '\e051'

.wf-o365-downcarat content: '\e052'

.wf-o365-e053 content: '\e053'

.wf-o365-e054 content: '\e054'

.wf-o365-officelogo content: '\e055'

.wf-o365-o365logo content: '\e056'

.wf-o365-gallatinlogo content: '\e056'

.wf-o365-o365gallatinfooterlogo content: '\e056'

.wf-o365-o365logopreview content: '\e057'

.wf-o365-o365gallatinlogo content: '\e057'

.wf-o365-o365gallatinlogopreview content: '\e057'

.wf-o365-e05a content: '\e05a'

.wf-o365-e05b content: '\e05b'

.wf-o365-e05c content: '\e05c'

.wf-o365-e05d content: '\e05d'

.wf-o365-e05e content: '\e05e'

.wf-o365-e05f content: '\e05f'

.wf-o365-appslogo content: '\e060'

.wf-o365-officestorelogo content: '\e061'

.wf-o365-outlooklogo content: '\e062'

.wf-o365-projectlogo content: '\e063'

.wf-o365-yammerlogo content: '\e064'

.wf-o365-crmlogo content: '\e065'

.wf-o365-lynclogo content: '\e066'

.wf-o365-e067 content: '\e067'

.wf-o365-e068 content: '\e068'

.wf-o365-e069 content: '\e069'

.wf-o365-e06a content: '\e06a'

.wf-o365-e06b content: '\e06b'

.wf-o365-e06c content: '\e06c'

.wf-o365-e06d content: '\e06d'

.wf-o365-e06e content: '\e06e'

.wf-o365-e06f content: '\e06f'

.wf-o365-e070 content: '\e070'

.wf-o365-e071 content: '\e071'

.wf-o365-sharepointlogo content: '\e072'

.wf-o365-e073 content: '\e073'

.wf-o365-e074 content: '\e074'

.wf-o365-e075 content: '\e075'

.wf-o365-e076 content: '\e076'

.wf-o365-e077 content: '\e077'

.wf-o365-e078 content: '\e078'

.wf-o365-e079 content: '\e079'

.wf-o365-e07a content: '\e07a'

.wf-o365-e07f content: '\e07f'

.wf-o365-e080 content: '\e080'

.wf-o365-admin content: '\e081'

.wf-o365-becometheadmin content: '\e081'

.wf-o365-gallatinfooterlogo content: '\e082'

.wf-o365-mslogo content: '\e083'

.wf-o365-e084 content: '\e084'

.wf-o365-e085 content: '\e085'

.wf-o365-e086 content: '\e086'

.wf-o365-chevronup content: '\e087'

.wf-o365-chevrondown content: '\e088'

.wf-o365-e089 content: '\e089'

.wf-o365-e08a content: '\e08a'

.wf-o365-powerbilogo content: '\e08b'

.wf-o365-e08c content: '\e08c'

.wf-o365-newsfeed content: '\e08d'

.wf-o365-e08e content: '\e08e'

.wf-o365-e08f content: '\e08f'

.wf-o365-e090 content: '\e090'

.wf-o365-e091 content: '\e091'

.wf-o365-e092 content: '\e092'

.wf-o365-e093 content: '\e093'

.wf-o365-e094 content: '\e094'

.wf-o365-e09a content: '\e09a'

.wf-o365-e09b content: '\e09b'

.wf-o365-e09c content: '\e09c'

.wf-o365-e09d content: '\e09d'

.wf-o365-e09e content: '\e09e'

.wf-o365-e0a0 content: '\e0a0'

.wf-o365-e0a1 content: '\e0a1'

.wf-o365-e0a2 content: '\e0a2'

.wf-o365-e0a3 content: '\e0a3'

.wf-o365-e0a4 content: '\e0a4'

.wf-o365-e0a5 content: '\e0a5'

.wf-o365-e0a6 content: '\e0a6'

.wf-o365-e0a7 content: '\e0a7'

.wf-o365-e0a8 content: '\e0a8'

.wf-o365-e0a9 content: '\e0a9'

.wf-o365-e0aa content: '\e0aa'

.wf-o365-e0ab content: '\e0ab'

.wf-o365-e0ac content: '\e0ac'

.wf-o365-e0ad content: '\e0ad'

.wf-o365-e0ae content: '\e0ae'

.wf-o365-e0b0 content: '\e0b0'

.wf-o365-e0b1 content: '\e0b1'

.wf-o365-e0b2 content: '\e0b2'

.wf-o365-gallatinlogo content: '\e053'

.wf-o365-e0b4 content: '\e0b4'

.wf-o365-excellogo content: '\e0b5'

.wf-o365-e0b6 content: '\e0b6'

.wf-o365-onenotelogo content: '\e0b7'

.wf-o365-powerpointlogo content: '\e0b8'

.wf-o365-wordlogo content: '\e0b9'

.wf-o365-e0c0 content: '\e0c0'

.wf-o365-e100 content: '\e100'

.wf-o365-e101 content: '\e101'

.wf-o365-e102 content: '\e102'

.wf-o365-e103 content: '\e103'

.wf-o365-e104 content: '\e104'

.wf-o365-e105 content: '\e105'

.wf-o365-e106 content: '\e106'

.wf-o365-e110 content: '\e110'

.wf-o365-e111 content: '\e111'

.wf-o365-e112 content: '\e112'

.wf-o365-e113 content: '\e113'

.wf-o365-e114 content: '\e114'

.wf-o365-e115 content: '\e115'

.wf-o365-e116 content: '\e116'

.wf-o365-e117 content: '\e117'

.wf-o365-pulselogo content: '\e118'

.wf-o365-e119 content: '\e119'

.wf-o365-e11a content: '\e11a'

.wf-o365-e11b content: '\e11b'

.wf-o365-newfeature content: '\e11c'

.wf-o365-e11d content: '\e11d'

.wf-o365-e11e content: '\e11e'

.wf-o365-waffle content: '\e11f'

.wf-o365-e120 content: '\e120'

.wf-o365-e121 content: '\e121'

.wf-o365-e122 content: '\e122'

.wf-o365-sociallisteninglogo content: '\e123'

.wf-o365-e124 content: '\e124'

.wf-o365-e125 content: '\e125'

.wf-o365-office365adminlogo content: '\e130'

.wf-o365-e131 content: '\e131'

.wf-o365-e132 content: '\e132'

.wf-o365-e133 content: '\e133'

.wf-o365-e134 content: '\e134'

.wf-o365-e135 content: '\e135'

.wf-o365-e136 content: '\e136'

.wf-o365-partner content: '\e137'

.wf-o365-e138 content: '\e138'

.wf-o365-e139 content: '\e139'

.wf-o365-e150 content: '\e150'

.wf-o365-e151 content: '\e151'

.wf-o365-e152 content: '\e152'

.wf-o365-e153 content: '\e153'

.wf-o365-e154 content: '\e154'

.wf-o365-group content: '\e155'

.wf-o365-e156 content: '\e156'

.wf-o365-e157 content: '\e157'

.wf-o365-e158 content: '\e158'

.wf-o365-e159 content: '\e159'

.wf-o365-e15a content: '\e15a'

.wf-o365-e15b content: '\e15b'

.wf-o365-e15c content: '\e15c'

.wf-o365-e15d content: '\e15d'

.wf-o365-e15e content: '\e15e'

.wf-o365-e15f content: '\e15f'

.wf-o365-e160 content: '\e160'

.wf-o365-e161 content: '\e161'

.wf-o365-e162 content: '\e162'

.wf-o365-e163 content: '\e163'

.wf-o365-e164 content: '\e164'

.wf-o365-e165 content: '\e165'

.wf-o365-e166 content: '\e166'

.wf-o365-e167 content: '\e167'

.wf-o365-e168 content: '\e168'

.wf-o365-e169 content: '\e169'

.wf-o365-e16a content: '\e16a'

.wf-o365-e16b content: '\e16b'

.wf-o365-e16c content: '\e16c'

.wf-o365-e16d content: '\e16d'

.wf-o365-e16e content: '\e16e'

.wf-o365-e16f content: '\e16f'

.wf-o365-video content: '\e170'

.wf-o365-e171 content: '\e171'

.wf-o365-e172 content: '\e172'

.wf-o365-e173 content: '\e173'

.wf-o365-e174 content: '\e174'

.wf-o365-e175 content: '\e175'

.wf-o365-e176 content: '\e176'

.wf-o365-e177 content: '\e177'

.wf-o365-e178 content: '\e178'

.wf-o365-e179 content: '\e179'

.wf-o365-e17a content: '\e17a'

.wf-o365-e17b content: '\e17b'

.wf-o365-e17c content: '\e17c'

.wf-o365-e17d content: '\e17d'

.wf-o365-e17e content: '\e17e'

.wf-o365-e17f content: '\e17f'

.wf-o365-e180 content: '\e180'

.wf-o365-mobile content: '\e195'

.wf-o365-skype content: '\e199'

.wf-o365-videologo content: '\e202'

.wf-o365-paraturelogo content: '\e20a'

.wf-o365-globe content: '\e222'

.wf-o365-binglogo content: '\e225'

.wf-o365-msnlogo content: '\e241'

.wf-o365-swaylogo content: '\e247'

.wf-o365-Skype4Businesslogo content: '\e258'

.wf-o365-highlanderlogo content: '\e259'

.wf-o365-classnotebooklogo content: '\e25f'

.wf-o365-pawlogo content: '\e271'

.wf-o365-homeroomlogo content: '\e276'