How to use Icon Fonts with SharePoint

One of the current trends in the web world is to use icon fonts with and for various things in your web user interface. They are fast to load, easy to scale in size, quick to change color, and it’s simple to add effects. Icon fonts can be used in SharePoint with just a little CSS. This post contains demos for both SharePoint 2010 and 2013.

First you need an icon font

There are several free fonts available and of course some paid ones too. You can check out these popular free icon fonts:

For my demos below I used Fontello, which allows you to custom build a font from several sources using only the icons you want. If you like, you can download the custom font I built (has only 6 glyphs).

Add the font to your SharePoint site

When you want to use an font in your site that most people don’t have installed on their computer, you have to provide the font for them. But it isn’t as easy as just uploading the font file to your web site. Different browsers use different font file formats (such as WOFF and EOT) so you need to upload several versions of the font in order for it to work with the various browsers. There are online tools like Font Squirrel that will convert your font to the different file formats that you need. If you want to get really nerdy and learn some of the back story, check out this article on Smashing Magazine.

The nice thing about these icon fonts is most of them come already converted and ready to go for your web site. All you need to do is add the files to SharePoint. I personally like to keep font files with the CSS files, be it on your web server or in the Style Library. You can create a folder and add the files just like you would any other file type. Below is a screen shot of my sample SharePoint site showing the font files and the CSS file I am using, all stored in the Style LIbrary.

Location of font files in SharePoint

Reference the font in your CSS

With these instructions, I am assuming you have a custom CSS file already in place.

When you want to specify a font in CSS you just do this:

font-family: sans-serif;

When using a custom font that you are providing, you need to declare the font files in the CSS file. You do this with @font-face:

@font-face {
    font-family: 'fontello';
    src: url('fonts/fontello.eot?19603093');
    src: url('fonts/fontello.eot?19603093#iefix') format('embedded-opentype'),
    url('fonts/fontello.woff?19603093') format('woff'),
    url('fonts/fontello.ttf?19603093') format('truetype'),
    url('fonts/fontello.svg?19603093#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}

The above code block was generated for me by Fontello and all the major icon font providers will give you the code to use. All you need to do is update the paths to point to where you stored the font files. Now that the CSS knows where to find the font, you can use the regular font-family:

font-family: fontello;

Swap out SharePoint elements for an icon font

For these demos I just picked some key areas in the out-of-the-box (OOTB) SharePoint branding and traded out the default icons for glyphs in the icon font. You could use this technique for lots of things in SharePoint and in your custom design.

All of the CSS has been commented so you can understand what the property/value pair is doing. These comments are not required in your CSS file.

All of these tricks use the :before pseudo element. This is supported in all major browsers (check out your browser support on CanIUse.com) and is a great method for adding embellishments to your site.

This post includes the following demos:

You can also get the code.

Change Search magnifying icon – SharePoint 2010

Change SharePoint 2010 Go icon

I have to admit, I sometimes snicker at these highly customized SharePoint sites that use the default magnifying glass for search. There is nothing wrong with it but when everything else in the user interface has been changed, why not that little magnifying glass? It is dead easy to do with CSS. Here is the HTML (trimmed for demonstration purposes) that is generated for the icon:

<td class="ms-sbgo ms-sbcell">
    <a href="javascript:S3031AEBB_Submit()" title="Search">
        <img style="border-width:0px;" src="/_layouts/images/gosearch15.png" alt="Search" class="srch-gosearchimg" onmouseout="this.src='\u002f_layouts\u002fimages\u002fgosearch15.png'" onmouseover="this.src='\u002f_layouts\u002fimages\u002fgosearchhover15.png'" title="Search">
    </a>
</td>

Using CSS we will hide the OOTB magnifying glass by targeting the IMG and then place in an icon font glyph where the anchor (A) is that triggers the search. We will utilize the CSS class of ms-sbgo as a descendant selector in order to change only the search go area.

/* Hide default Search icon */
    .ms-sbgo img {
        display: none;
    }

/* Expand search Go anchor to create clickable area */
    .ms-sbgo a {
        width: 20px;  /* Update value as needed for icon size */
        height: 20px;   /* Update value as needed for icon size */
        display: block; /* Required to effectively set image height and width to show full icon image */ 
        margin: 2px 0 0 5px; /* Create space between anchor and search input */
    }

/* Add icon to Go anchor */
    .ms-sbgo a:before {
        content: '\e801';  /* Magnifying glass icon in Fontello */
        font-family: fontello;
        font-size: 16px;  /* Size of icon */
        color: #3ABCFE;  /* Color of icon */
        font-variant: normal;  /* Reset parent style that can break glyph codes */
        text-transform: none;  /* Reset parent style that can break glyph codes */
    }

/* Alter icon on hover */
    .ms-sbgo a:hover:before {
        color: #1B920B;  /* Color of icon on hover */
    }

Change Recycle Bin & All Site Content icons – SharePoint 2010

The approach is mostly the same as search to switch out the icons for Recycle Bin and All Site Content. The CSS hides the default icons and places the new ones using the SPAN tags that are wrapped around the original icons.

Change Recycle Bin icon

Here is the HTML (trimmed for demonstration purposes) that is generated for the Recycle Bin:

<a href="/sites/masters/_layouts/recyclebin.aspx" class="s4-rcycl">
    <span class="s4-clust s4-specialNavIcon" style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;">
        <img style="border-width:0px;position:absolute;left:-0px !important;top:-428px !important;border-width:0px;" src="/_layouts/images/fgimg.png">
    </span>
    <span class="ms-splinkbutton-text">Recycle Bin</span>
</a>

Our CSS will target the nested IMG, the anchor (A) assigned a class of s4-rcycl and the SPAN assigned a class of s4-clust, which is a class used in multiple areas of SharePoint.

/* Hide default Recycle Bin icon */
    .s4-rcycl span img {
        display: none;
    }

/* Add icon to Recycle Bin text */
    .s4-rcycl .s4-clust:before {
        content: '\e802';  /* Trash icon in Fontello */
        font-family: fontello;
        font-size: 15px;  /* Size of icon */
        color: #2E9226;  /* Color of icon */
        font-variant: normal;  /* Reset parent style that can break glyph codes */
        text-transform: none;  /* Reset parent style that can break glyph codes */
    } 

/* Alter icon on hover */
    .s4-rcycl .s4-clust:hover:before {
        color: #7C111A;  /* Color of icon on hover */
    }

Change All Site Content icon

Here is the HTML (trimmed for demonstration purposes) that is generated for the All Site Content link:

<a href="/sites/masters/_layouts/viewlsts.aspx">
    <span class="s4-clust s4-specialNavIcon" style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;">
        <img style="border-width:0px;position:absolute;left:-0px !important;top:-0px !important;border-width:0px;" src="/_layouts/images/fgimg.png">
    </span>
    <span class="ms-splinkbutton-text">All Site Content</span>
</a>

Since there isn’t a class assigned to the anchor, we will use an attribute selector to target that element.

/* Hide default All Site Content icon */
    a[href$="/viewlsts.aspx"] span img {
        display: none;
    }

/* Add icon to All Site Content text */
    a[href$="/viewlsts.aspx"] .s4-clust:before {
        content: '\e803';  /* List icon in Fontello */
        font-family: fontello;
        font-size: 15px;  /* Size of icon */
        color: #48497C;  /* Color of icon */
        font-variant: normal;  /* Reset parent style that can break glyph codes */
        text-transform: none;  /* Reset parent style that can break glyph codes */
    } 

/* Alter icon on hover */
    a[href$="/viewlsts.aspx"] .s4-clust:hover:before {
        color: #7C111A;  /* Color of icon on hover */
    }

Change Site Permissions under Site Actions icon – SharePoint 2010

Change Site Permissions icon

Let’s change direction and instead of updating an icon in the regular web page, let’s update an icon in the Site Actions drop down menu. Check out the HTML (trimmed for demonstration purposes) for the Site Permissions menu item:

<li type="option" class="ms-MenuUIULItem">
    <div class="ms-MenuUIULItem" text="Site Permissions" text_original="Site Permissions" description_original="Give people access to this site." valorig="">
        <a class="ms-MenuUIULLink" id="mp1_0_10_Anchor" href="javascript:;" onclick="return false;">
            <span class="ms-MenuUIIconLarge" style="white-space: nowrap;">
                <img width="32" height="32" class="ms-MenuUIULImg" id="mp1_0_10_ICON" src="/_layouts/images/Permissions32.png" alt="" title="">
            </span>
            <span class="ms-MenuUILabel" id="zz7_MenuItem_SitePermissions">
                <span style="white-space: normal;">Site Permissions</span>
                <br>
                <span class="ms-menuitemdescription" style="white-space: normal;">Give people access to this site.</span>
            </span>
        </a>
    </div>
</li>

The wrapper DIV has a class of ms-MenuUIULItem but this is used for every item in Site Actions. So instead of using the class we will use an attribute selector to target just Site Permissions. There are also several SPAN tags in use so we will use the class ms-MenuUIIconLarge in order to only target the SPAN wrapped around the icon image.

/* Hide default Site Permissions icon */
    div span img {
        display: none;
    }

/* Add icon to Site Permissions text */
    div .ms-MenuUIIconLarge:before {
        content: '\e805';  /* Lock icon in Fontello */
        font-family: fontello;
        font-size: 30px;  /* Size of icon */
        color: #AD1716;  /* Color of icon */
        font-variant: normal;  /* Reset parent style that can break glyph codes */
        text-transform: none;  /* Reset parent style that can break glyph codes */
        padding-left: 5px; /* Adjust padding so icon is centered in existing space */
    } 

/* Alter icon on hover */
    div .ms-MenuUIIconLarge:hover:before {
        color: #12AD27;  /* Color of icon on hover */
    }

Any of the items in the Site Actions menu can be altered using this method. You just need to change the attribute selector to pinpoint the appropriate menu item. I was able to capture the HTML code by using Firebug in Firefox however any DOM inspector in a browser should work.

Change “I like it” & “Tags & notes” – SharePoint 2010

Change social data icons

What we have been doing is nice, but is tiny. Let’s put an icon font glyph in a larger area in SharePoint. Here is the HTML (trimmed for demonstration purposes) for the “I like it” & “Tags & notes” social links in SharePoint.

<a title="Tags this page with 'I Like It.'" id="AddQuickTag_ctl00_ctl37" class="ms-socialNotif">
    <span>
        <span style="height:32px;width:32px;position:relative;display:inline-block;overflow:hidden;">
            <img src="/_layouts/images/mossfgimg.png" alt="Tags this page with 'I Like It.'" id="AddQuickTagImg_ctl00_ctl37" style="border:0; left:-0px !important;top:-132px !important;position:absolute;">
        </span>
        <span class="ms-socialNotif-text">I Like It</span>
    </span>
</a>

<a title="Tags help you remember links and classify the page." id="TagsAndNotes_ctl00_ctl37" class="ms-socialNotif">
    <span>
        <span style="height:32px;width:32px;position:relative;display:inline-block;overflow:hidden;">
            <img src="/_layouts/images/mossfgimg.png" alt="Tags help you remember links and classify the page." id="TagsAndNotesImg_ctl00_ctl37" style="border:0; left:-0px !important;top:-300px !important;position:absolute;">
        </span>
        <span class="ms-socialNotif-text">Tags &amp; Notes</span>
    </span>
</a>

If you look closely at the code you will see that both social icons use the ms-socialNotif CSS class. This CSS class can be used to target both social links, then we can use an attribute selector to target each social link separately. Since there is sharing of properties, we can remove duplicate info and condense down our CSS. The social links also introduce a challenge with the state of previously set tags and notes, as well as a different type of hover style.

/* Hides default SharePoint Social Data images */
    .ms-socialNotif img,
    .ms-socialNotif span {
        display:none;
    }

/* Adjust padding around social data container */
    .ms-socialNotif-Container {
        margin: 0 10px 0 0;
    }

/* Alter height of divider */
    .ms-socialNotif-groupSeparator {
        height: auto;
    }

/* Hyperlink around icon/button
-Sets new width and height for Social Data icons */
    a.ms-socialNotif,
    a.ms-socialNotif {
        width: 35px; 
        height: 30px;       
    }

/* Shared properties for new Social Data icons */
    a.ms-socialNotif:before {
        font-family: fontello;
        font-size: 25px;  /* Size of icon */
        color: #A9A9A9;  /* Color of icon */
        font-variant: normal;  /* Reset parent style that can break glyph codes */
        text-transform: none;  /* Reset parent style that can break glyph codes */
    } 

/* Off state icon for "I like it" */
    a.ms-socialNotif[ID*=AddQuickTag]:before {
        content: '\e800';  /* Smiley icon in Fontello */
    } 

/* Hover state icon for "I like it" */
    a.ms-socialNotif[ID*=AddQuickTag]:hover:before,
    a.ms-socialNotif[ID*=AddQuickTag]:focus:before {
        content: '\e800';  /* Smiley icon in Fontello */  
        color: #54AD28;
    }

/* Off state icon for "Tags and Notes" on a page with *no* previously set tags 
-This seems repetitive based on style below (a.ms-socialNotif[title*="0 tags or notes"]) but this is required to show the off state on page load. */
    a.ms-socialNotif[ID*=TagsAndNotes]:before {
        content: '\e804';  /* Tags icon in Fontello */
    } 

/* Hover state icon for "Tags and Notes" and On state for "Tags and Notes" on a page with previously set tags - only shows up after hovering over icon once */
    a.ms-socialNotif[ID*=TagsAndNotes]:hover:before,
    a.ms-socialNotif[ID*=TagsAndNotes]:focus:before,
    a.ms-socialNotif[title*="tags or notes"]:before {
        content: '\e804';  /* Tags icon in Fontello */
        color: #4098AD;   
    }

/* Off state icon for "Tags and Notes" on a page with *no* previously set tags 
-This is needed to override On state set in previous style statement. */
    a.ms-socialNotif[title*="0 tags or notes"]:before {
        content: '\e804';  /* Tags icon in Fontello */
        color: #A9A9A9;
    } 

/* Changes default SharePoint hover styles */ 
    .ms-socialNotif:hover,
    .ms-socialNotif:focus { 
        background-color: transparent;
        border:1px solid transparent;
    }

Change Search magnifying icon – SharePoint 2013

Change SharePoint 2013 search icon

The SharePoint 2013 code for search doesn’t differ too much from what was used for SharePoint 2010. A class name has changed for the wrapping HTML (trimmed for demonstration purposes):

<a href="javascript: {}" id="ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_SearchLink" class="ms-srch-sb-searchLink" title="Search">
    <img alt="Search" id="searchImg" class="ms-srch-sb-searchImg" src="/_layouts/15/images/searchresultui.png?rev=23">
</a>

In addition to the class name change there is new hover effect that needs to be removed that OOTB SharePoint provides. Here is the final CSS:

/* Hide default Search icon */
    .ms-srch-sb-searchLink img {
        display: none;
    }

/* Add icon to Go anchor */
    .ms-srch-sb-searchLink:before {
        content: '\e801';  /* Magnifying glass icon in Fontello */
        font-family: fontello;
        font-size: 16px;  /* Size of icon */
        color: #3ABCFE;  /* Color of icon */
        font-variant: normal;  /* Reset parent style that can break glyph codes */
        text-transform: none;  /* Reset parent style that can break glyph codes */
    }

/* Alter icon on hover */
    .ms-srch-sb-searchLink:hover:before {
        color: #1B920B;  /* Color of icon on hover */
    }

/* Remove OOTB search Go anchor hover formatting */
    .ms-srch-sb-searchLink:hover {
        background: transparent;
        text-decoration: none;
    }

Change Suite Bar “Follow” icon – SharePoint 2013

Change Suite Bar Follow icon

Here is the HTML (trimmed for demonstration purposes) for the Follow link in the Suite Bar, which goes across the top of a SharePoint 2013 site:

<a style="display:inline-block;" class="ms-promotedActionButton" id="site_follow_button">
    <span class="s4-clust ms-promotedActionButton-icon" style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;">
        <img style="position: absolute; left: -218px; top: -48px;" alt="Follow" src="/_layouts/15/images/spcommon.png?rev=23">
    </span>
    <span class="ms-promotedActionButton-text">Follow</span>
</a>

Based on the HTML, this will be straightforward CSS. We can target the Follow icon through the unique ID site_follow_button on the anchor (A).

/* Hide default Follow icon */
    #site_follow_button .s4-clust {
        display: none !important;  /* !important necessary to override OOTB inline style */
    }

/* Add icon to anchor */
    #site_follow_button:before {
        content: '\e800';  /* Smiley icon in Fontello */
        font-family: fontello;
        font-size: 14px;  /* Size of icon */
        color: #3ABCFE;  /* Color of icon */
        font-variant: normal;  /* Reset parent style that can break glyph codes */
        text-transform: none;  /* Reset parent style that can break glyph codes */
        margin-right: 5px;  
    }

/* Alter icon on hover */
    #site_follow_button:hover:before {
        color: #54AD28;
    } 

Add an icon to Site Contents in Site Actions menu – SharePoint 2013

Add icon to SharePoint 2013 Site Actions

Everything so far has been changing out images for icon font glyphs but you can just as easily add in icons that weren’t there before. For example, let’s add an icon in the Site Actions menu, which in SharePoint 2013 has all of the menu item icons hidden. The following is the HTML (trimmed for demonstration purposes) for the Site Contents link in the Site Actions drop down menu:

<li class="ms-core-menu-item">
    <a class="ms-core-menu-link" id="mp1_0_5_Anchor" href="javascript:;" onclick="return false;" title="Site contents">
        <div class="ms-hide">
            <img src="/_layouts/15/images/allcontent32.png?rev=23" alt="" title="" id="mp1_0_5_ICON">
        </div>
        <div class="ms-core-menu-label" id="zz9_MenuItem_ViewAllSiteContents">
            <span class="ms-core-menu-title">Site contents
        </div>
    </a>
</li>

Interestingly enough, an icon is present (allcontent32.png) but is hidden with ms-hide. But we are going to ignore that and add an icon by targeting the SPAN tag with a unique ID that contains ViewAllSiteContents. Here is our CSS:

/* Add icon to text */
    div[id$="ViewAllSiteContents"] .ms-core-menu-title:before {
        content: '\e803';  /* List icon in Fontello */
        font-family: fontello;
        font-size: 14px;  /* Size of icon */
        color: #3ABCFE;  /* Color of icon */
        font-variant: normal;  /* Reset parent style that can break glyph codes */
        text-transform: none;  /* Reset parent style that can break glyph codes */
        margin: 0 5px 0 -10px;  
    }

/* Alter icon on hover */
    div[id$="ViewAllSiteContents"] .ms-core-menu-title:hover:before {
        color: #262AAD;
    }

Making your own changes

Throughout all of these examples, the technique remains the same:

  1. Pick a font and add it to your site and CSS.
  2. Target an element on the page by using a CSS selector. Inspect a web page element using a browser DOM inspector tool, like Firebug. Look at surrounding classes, IDs and other tag properties to help build your selector.
  3. Hide any existing images, if any.
  4. Use the :before pseudo element to insert a glyph from the icon font.
  5. Save everything to a custom CSS file!

Sample code and font

You can grab a copy of all of the CSS used in these demos and the custom font created at Fontello: