Office 365 font size
By setting a CSS class to “ms-Icon–waffle2”, we display the waffle icon. The  letter combination defines the “waffle” icon. We can see that letter combination for the “waffle” icon in CSS: Special fonts are uploaded to the page with that defines what font will be applied by the special fonts are not available, the “waffle” icon and other icons look like this: The special fonts used to display the icon are defined in CSS: HTML for the “waffle” icon looks like this: On the picture below, the “waffle” and other icons on the gray background of the Suite bar are font icons: It cannot be stretched and look awful when you try to change the size. Font iconsįont icons use special font to display combination of letters as an icon. Each time a new SharePoint theme is set to a site, a copy of this sprite file with different colors is generated. The other lighter version of the image is used as icon for on-mouse-over (hover) state.Ĭhanging the color and size of the SHARE icon is not something we can do with CSS. It defines which part of the image is visible as location of the icon from top and left side of the sprite. We only use and see a part of this sprite image on the page. The sprite used to show the SHARE icon looks like this: CSS spritesĪ CSS sprite is a single image file that combines multiple images. They are implemented as CSS sprites that are uploaded to the page as inlined png images (data:image/png base64). The icons below the Suite bar, SHARE, FOLLOW, and EDIT icons are old school SharePoint 2013 icons. Not all icons on Office 365 are font icons though. Icons on Office 365 and icons of the Office UI Fabric are font icons. SharePoint developers that work on on-premise intranets know icons as CSS sprites and images. Controls such as search box are server controls in SharePoint 2013, while the search box control that is available with Office UI Fabric is pure HTML and JavaScript. Office UI Fabric is new way to implement branding and controls. We can even contribute to the project on GitHub.
#Office 365 font size how to#
The code and examples how to implement the icons and controls are provided for us developers. No more archaeology expeditions and adventures.
A lot of time is spent digging and diving into the files of the Layouts folder, using browser developer tools, reading blogs or browsing the code in SharePoint Designer.
Using SharePoint CSS, SharePoint controls, UI Fabric Icons and colors is integral part of SharePoint development.