Looking For Easy SharePoint Icons? Check out FontAwesome

There has been a lot of talk recently surrounding FontAwesome. Now is a great time to share our latest experience using FontAwesome on a recent SharePoint Intranet project as the creators of FontAwesome announced FontIcons, a subscription service that includes a feature rich version of FontAwesome.
But what is FontAwesome? FontAwesome in the simplest terms is just a font type face, but Instead of the traditional Roman alphabet you get with most font sets you get “awesome” and useful icons. FontAwesome takes advantage of the undefined and unprintable unicode characters and assigns an icon to that unicode. So simple, so elegant and sounds too good to be true. It’s not, at all!
Here is a small snippet of the 585 icons that are available in version 4.4.0.
Snippet of FontAwesome Icons
FontAwesome can be used in most use cases, including commercially. Check out their licensing here, but in general, what is not to like about free? Now why is FontAwesome awesome? Since FontAwesome is an icon set it is perfect for those looking to build responsively. You include the font in your stylesheet the same way you would insert any web font (such as a google font) and then utilize accordingly. Also since FontAwesome is just a font, it scales without any degradation. Large icons, small icons, it doesn’t matter, the download is lean and compact.
This is perfect for organizations that don’t have a design team or the resources to build out hundreds of custom icons. You can still maintain your brand through custom colors, size, shadow, and other CSS styling options. FontAwesome is a very lean way to insert iconography into your intranet, extranet, or public facing site. They also have a pretty active community set up on GitHub and Stack Overflow , two great areas for support and feedback.
Our team has been wrapping up a project in which we built an intranet for a client based off mock-ups that they provided. Their designers replaced most of the out-of-the-box SharePoint icons, which was now based on FontAwesome icons. We worked with the client to implement the required design into their SharePoint Intranet and then we were able to seamlessly replace most of the out of the box SharePoint icons with FontAwesome icons.
How did we use FontAwesome? There are a few primary methods to use FontAwesome. Using the single line of HTML code that you place in the <head> section, you can load the FontAwesome stylessheet from a content delivery network (CDN), similar to the following HTML.
HTML Linking in Header
Then we can use inline elements (<i>tag) to place icons on the page. If we wanted to include the black-tie icon on our page, the HTML would look something like this:
<i class=”fa fa-black-tie”> Inserting Black Tie Tag
Once inserted, this is what my icon looked like in SharePoint!
We chose to include the icons directly using CSS. Either include a link to FontAwesome in your CSS or include the full FontAwesome CSS in your custom stylesheet. To insert the icons use the CSS Prefix and the icon name. It is really easy to modify the icon in your CSS – just target the icon and for example, change the color to match the color palate of your website.
The following is the snippet of code targeting the Search Box button. We are going to replace the standard search go button with the black-tie icon from FontAwesome. You might notice that we adjust the color and size of the icon using CSS as we would for any text font customization.

.ms-srch-sb-searchLink IMG {
.ms-srch-sb-searchLink:before {
font-family: 'FontAwesome';
font-size: 18px;
color: #00a6ca;
content: '\f27e';
text-decoration: none;
margin-right: 0;
display: block;
width: 20px;
height: 24px;
margin-top: 1px;

What this CSS does is first hide the OOTB search button. Once this image button has been hidden, we then add a new pseudo container “before” the search go “link”. This new container is given a basic space to work in (20px wide by 24px tall) and we fill this with the Unicode character “\f27e”. This is not a printable character normally, but for FontAwesome, this character code does have a value, our black-tie! Lastly we set the color to #00a6ca (blue) and give it a size (18px). And since this is just a font applied to a character, no matter the size we specify, the “icon” image will always be of a very high quality!
FontAwesome is an easy to use alternative to custom icons. If you’ve used custom fonts before then you are already familiar with the process of using the icons included in the icon set. FontAwesome would be best for small teams that do not have the resources or bandwidth for design time. If anyone is going to start using the subscription service, FontIcons we would love to hear about your experience with it. Feel free to tell us in the comments below!

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under


The Microsoft Viva modules are revolutionary tools used to aid one's work stability and improve their digital workspace experience. Find out more by tuning into to Eric Overfield's "The State of Microsoft Viva & The Digital Workspace" PixelMill Webinar!

Not sure what an Employee Experience Platform is and how Microsoft Viva fits into that? Then check out the PixelMill Webinar "The state of Microsoft Viva and The Digital Workspace" by Eric Overfield!

Get excited for our next episode of the #PixelMillWebinars! In this session:
-Power Platform 101:Power Automate, Power Apps, Power Virtual Agents, Power Pages & Power BI  
-Power Platform in action on an intranet  
-Power Platform adoption best practices 

Imagine having all the tools and resources you need to be successful in just one place! Eric Overfield digs deeper into the details of Microsoft Viva and how Teams + Viva can make that dream a reality. Watch the latest PixelMill Webinar to learn more!

Get excited for our next episode of the #PixelMillWebinars! Our CPO, Microsoft MVP & Regional Director Eric Overfield breaks down:
-Each of the 9 GA Viva Modules
-How the modules integrate
-Successful practices when rolling out Viva in your organization

Subscribe to PixelMill's

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch