Icon fonts are some of the best and easiest ways to add some visual aid to your SharePoint websites. They add increased flexibility with your design because they can be altered through CSS. A quick web search for Icon Fonts will show you the vast amount of fonts that are available these days. In this quick how-to, we’ll be using Google’s Material Design Icons.
Getting Started
First things first, we need to reference the font icon in our Master Page. There are several ways to do this, we can host the fonts and the CSS ourselves, or we can use a CDN (Content Delivery Network) to host the files for us. In this example we will be using the latter.
Visit http://google.github.io/material-design-icons/ for more information and file downloads if you would like to hose the files on your own server.
Here is the google provided link if you do not wish to host the files yourself:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Open your Master Page, and paste that link inside the <head> tags.
Now that we have the proper file linked with the master page, we can dive right into our CSS and begin to explore some of the benefits of using font icons.
Now What?
As mentioned above, now we can begin to add icons to elements all through some simple CSS. Some quick exercises that we’ll do is adding icons to the web part titles, and to unordered lists on our page. Let’s get started on the web part titles.
Web Part Title Icons
Since we’ll be doing this all through CSS, it’s important to note that we’ll be using the escaped HTML code provided for each icon, you can see these on the Google Material Design Icons page, when you select an icon, it gives you this information.
Under the “Step 2:” section, for the IE9 or below snippet, you will see that inside the <i> tags, they are including the escaped HTML for that particular icon. All we need are the last four digits to use it in CSS.
For our web part titles, we’ll use two different icons. The first icon we’ll use is the language icon. There is no significance to these icons we’re using, I’m just choosing ones at random for these examples. So now that we have the language icon selected on the page, we can see what the escaped HTML is.
“E894” is what we’re looking for. Now that we have the escaped HTML for this particular icon, we’ll put it into our CSS. Copy and paste the following CSS snippet into your CSS file:
.s4-wpcell-plain:nth-child(1) h2.ms-webpart-titleText:before {content:"\E894"; font-family:"Material Icons";font-size:28px;margin-right:5px;display:inline-block; vertical-align:middle;}
You’ll notice that we’re using the nth-child selector. There is a drawback to using this, as it isn’t supporter in IE8 and below.
Since we have two web parts on our page currently, here is the second CSS snippet that you can copy.
.s4-wpcell-plain:nth-child(2) h2.ms-webpart-titleText:before {content:"\E893"; font-family:"Material Icons";font-size:28px;margin-right:5px;display:inline-block; vertical-align:middle;}
Here is what our web part titles look like now that we’ve saved our work.
Unordered List Icons
Another neat thing that we can do with the font icons, is give our unordered list a different look. On our test page, we have two content editor web parts, each with their own unordered lists. Through our CSS, and using the nth-child selector, we can give each unordered list its’ own unique look.
The first bit of CSS that we’ll apply will clear out the default bullet that is associated with unordered lists. Copy and paste the following into your CSS file:
.s4-wpcell-plain ul {list-style-type:none;}
After you have that in your file, copy and paste these next two lines below it, these two lines will change the unordered list icons for each one.
.s4-wpcell-plain:nth-child(1) ul li:before {content:"\E876"; color:#0072C6; font-family:"Material Icons";font-size:16px;margin-right:5px;display:inline-block; vertical-align:middle;}
.s4-wpcell-plain:nth-child(2) ul li:before {content:"\E86C"; color:#0072C6; font-family:"Material Icons";font-size:16px;margin-right:5px;display:inline-block; vertical-align:middle;}
Once you save your CSS file, your unordered lists should now have their own unique look!
Here is a screenshot of what our page looks like after these changes:
Wrapping it all Up
So as we have learned, font icons are awesome! I encourage you to explore the Google Material Design Icons page and find which icons you like the best, you might want to try them in your next project!
For more tips and tricks like this, check out our other blog posts. To get started with a fully designed intranet platform, checkout our IntranetPro!
