<< TILES CONFIGURATION MANUALTable of contents 
2.2 Icon Tile

The "Icon" tile type lets you create tiles consisting of an icon and an optional caption.
The "URL" tile setting attaches a link to the tile.

If you enter some text into the tile's "Description" field, it will be displayed as an overlay when hovering over the tile.
Icon Tile Icon Tile with text overlay

Font Awesome Icons:

You can choose from several hundreds of "Font Awesome" icons as listed here: https://fontawesome.com/v4.7.0/icons/
Please enter the name of the selected icon, prefixed by "fa-".
This example uses the below settings:

Title: Upcoming Events
Content: fa-calendar
Icon Tile linking to a Sharepoint calendar

Google Material Icons:

You alternatively can choose from several hundreds of "Google Material Icons"as listed here: https://material.io/icons/
Please enter the name of the selected icon, prefixed by "ma-".
This example uses the below settings:

Title: Projects
Content: ma-explore/size=48
Icon Tile using a Google Material icon

Office Fabric Icons:

You also can choose from a large selection of "Microsoft Office Fabric Icons"as listed here: https://uifabricicons.azurewebsites.net/
Please enter the name of the selected icon, prefixed by "ms-".
This example uses the below settings:

Title: HR Guide
Content: ms-Globe2
Icon Tile using an Office Fabric icon

Site Icon:

You alternatively can choose to display the site icon assigned to the site defined by the "URL" tile setting by using the below setting:

Title: HR Site
Content: [siteicon]

No Icon:

You alternatively can choose to not display an icon, but rather specify a background color or a backdrop image by specifying "none" as the icon name.
This example uses the below settings:

Title: SUBMIT HELPDESK TICKET
Content: none
Icon Tile with a backdrop image

Optional Parameters:

You can optionally override the icon size and icon color by appending the "/color" and/or "/size" parameters as follows:

Title: Welcome Address
Content: fa-youtube-play/color=red/size=42
Icon Tile



Please enter a comment below if you want to give feedback or have suggestions for improvements:

User Comments Post a Comment