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!

Tie-2

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 {
display:none;
}
.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!

SearchTie-1

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 Reply

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

Human Check *

Filed Under

#SharePoint...a basketball game...the sky's the limit! Sign up for 1-on-1 time with @EricOverfield at #Ignite2017… https://t.co/Dmmsaj3jNx

The final member of the #PixelLeague has arrived on the scene! The fearless Scriptonator is here to smash some bugs… https://t.co/P8kfO9w3kf

Unable to attend #Ignite2017? Get caught up on all the big news from someone with the inside track & join us on 9/2… https://t.co/HURDWifq7j

Only 1 member of the #PixelLeague remains to appear...Who will help save #Portalton?! Stay tuned this afternoon for… https://t.co/uFmrvX2Stg

Do you love to talk SharePoint? We know someone who does, too! Book 1-on-1 time with @EricOverfield at #Ignite2017!… https://t.co/ILqM62sYH6