Using FontAwesome as an icon framework

By -

When customizing the look and feel of a website, we often want to use specific, intuitive icons.
In some cases - such as content management platforms - these icons are already there, but they may not make sense for many reasons:
  • not completely meaningful
  • color does not match the site design
  • not flexible enough

Wouldn't it be great is there was a lightweight solution we could use, that doesn't involve any script, of even custom images?!

Well, there is. I have been using FontAwesome for a while now and I can say it is pretty impressive:
  • 100% CSS (no images, or scripts)
  • Supports IE8+ and other browsers
  • Its an icon framework with 500+ icons
  • Provides a consistent icon set
  • Supports features such as custom size, mouse over color, animated icons, rotation, etc.
  • Its free!
Now, the idea is that you embed, in your html, a tag with your markup.

e.g.

Here's a breakdown:
  • fa provides common icon styles
  • fa-camera-retro specifies the icon to be used
  • fa-3x enables to increase the original size 3 times

In this post,  I have confirmed that we can use this framework even without adding custom html, as long as we add a reference to font-awesome.min.css and include the font files.

div.github:before {
 content: "\f09b";
 font-family: FontAwesome;

 /* more styling for the icon, including color, font-size, positioning, etc. */
}

Using this other idea, considering the markup of a SharePoint site is already there, we can remove the existing icon, and add another one, not an image, but from FontAwesome.

/* disable default icon */
.ms-list-addnew-img20[src*="/_layouts/15/images/spcommon.png?rev=23"],
.ms-list-addnew-img16[src*="/_layouts/15/images/spcommon.png?rev=23"]
              {
               width:0; height:0;
               /*visibility:hidden;*/
              }

/* add new icon */
span.ms-list-addnew-imgSpan16:before,
span.ms-list-addnew-imgSpan20:before
/*.ms-list-addnew-img16[src*="/_layouts/15/images/spcommon.png?rev=23"]:before*/
             {
              /*icon framework*/
               content:"\f055";
               font-family:FontAwesome;
               /* custom icon size */
               font-size:20px;
             }

/* fix new icon position */
span.ms-list-addnew-imgSpan16,
span.ms-list-addnew-imgSpan20      {height:auto; width:auto;}

/* custom icon hover color */
span.ms-list-addnew-imgSpan16:hover,
span.ms-list-addnew-imgSpan20:hover     {color:red;}

Comments

Post a Comment

Popular posts from this blog

Breaking down document locking in SharePoint

By -
Image
This is a topic I've been meaning to discuss in a while. We open, change and close documents almost every day, and sometimes we collaborate with other people at the same time on those documents. SharePoint brings all co-authoring features we need, straight out-of-the-box, but sometimes, there are problems. While things are starting to look better on the cloud side, the concept of document locking is still very much up-to-date and understanding how it works and what to do when things go wrong is crucial. In an article that has since disappeared the Microsoft Knowledge Base (but still available here ), Microsoft explains it best: When a document is opened by a client program, Windows SharePoint Services puts a write lock on the document on the server. The write lock times out after 10 minutes. Users cannot modify the document during the time when the document is locked. In a scenario where the program that opens the document unexpectedly quits or crashes and you try to open the do
Read more

Working around X-Frame-Options for iframes

By -
Image
The problem: One of the first things we noticed after migrating to SharePoint 2013 was that our iframes have stopped working, giving the error: "Refused to display 'http://contoso/pages/home.aspx' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." Quickly we could see that this is in fact a security mechanism to prevent click-jacking and others: "The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a frame or iframe. Sites can use this to avoid Clickjacking attacks, by ensuring that their content is not embedded into other sites." Soon we realized that, starting SharePoint 2013, an HTTP Module is adding the header " X-Frame-Options " by default, with the value " SAMEORIGIN ". This is effectively preventing the rendering of pages outside the scope of the current web application. The (attempted) solution: So what to do?
Read more

Document ID not being generated

By -
Image
Problem In a scenario where we have many document Content Types, we may want to enable Document ID - aka "Permanent Links" - which is a feature in SharePoint that assigns a specific ID for each document. That ID never changes even if the document is renamed or moved to another location. In this scenario, the Document ID field was being generated for some libraries/content types, but not others, which is a surprisingly common problem. Background There are several stages we need to go through to enable use this mechanism. Stage 1 We enable the feature in the Site Collection Features. Stage 2 Under Site Collection Administration > Document ID Settings, we need to enable the assignment and pick a prefix. The IDs use the format: PREFIX-LISTID-LISTITEMID ( ref ) Where: PREFIX: the preconfigured prefix for the site collection, which can be any set of numbers and letters between 4-12 characters LISTID: the property docid_msft_hier_listid of the list
Read more