Switch out the SharePoint 2013 Site Actions gear icon for something more flexible

SharePoint 2013 switched from using the text “Site Actions” to showing a gear/cog/wagon wheel icon (I like gear so we will go with that for this post). That is all well and good until you need to change the background to a darker tone or if you want to change the color of the gear icon. SharePoint 2013 inserts in the icon image via HTML *cringe* thus making it more difficult to update to match your color scheme. With a little CSS we can knock out the default image and show our own icon instead.

The Problem

You want to alter the background color that happens to run behind the Site Actions gear icon (on-premises). Whether it is updating the Suite Bar background or if you have moved the Site Actions control in the master page or via CSS to a new location, you need to go from light to dark, yet the gear icon is a dark gray color. For example if I added this to my CSS:

#suiteBarRight {
  background: #000;
}

You would end up with this:

The effect of adding a dark color behind the right side of the SharePoint Suite Bar

Ewww.

The Solution

Using a little bit of CSS and one of two options, you can easily switch in a new icon. This solution only works for on-premises SharePoint and not SharePoint Online. 

Option 1 – My preferred method

Icon fonts are one of the better things to hit the CSS world lately, and can really come in handy, especially in situations like this. The nice thing about icon fonts is you can control the size and color of the icon through CSS.

There are lots of options out there, including building out your own icon font file with only the icons that you need. This may be the best choice if you are doing this for an intranet.

A few icon font options:

For this demo we will use FontAwesome, it is quick and easy to use and doesn’t require file generation or implementation.

The code bits

In your custom CSS file, add the following code at the top of your CSS file, above any style statements:

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);

FontAwesome updates frequently, so please check to see if you are using the latest version. At the time of this posting, it was 4.4.0. You can check for the latest version and update your code accordingly.

Now add the following CSS style statements.  The provided comments indicate what each declaration does and is not required in your final code.

Hide the default gear icon:

/* Hide Site Actions gear icon */
.ms-siteactions-imgspan {
	display: none;
}

Insert in a new icon using FontAwesome. The unicode character property in the content declaration is what pulls the right icon. You can view all available icons.

/* Insert new Site Actions gear icon - allows for icon color change */
.ms-siteactions-normal > a:before {
	content: "\f013";  /* Unicode character for icon font */
	font-family: FontAwesome;   /* Icon font - requires @import listed at top of file */
	color: #fff;  /* Icon color */
	font-size: 16px;  /* Icon size */
	font-weight: normal; /* Removes default bolding that can occur with icon font */
	padding-top: 7px;  /* Spaces down icon from top */
	display: block;  /* Forces respect of padding */
}

Here is the result:

FontAwesome icon for Site Actions gear

If you don’t like the single gear (cog) icon provided by FontAwesome, you can alternatively try the following for the unicode character property in line three. Be sure to leave the backslash, it properly escapes the code:

  • f085 – multiple gears (cogs)
  • f0ad – wrench
  • f141 – ellipses
  • f040 – pencil

Only thing left to do is clean up some hover effect stuff.

/* Remove OOTB Site Actions hover (appears as underline under icon) */
.ms-siteactions-normal > a:hover {
	text-decoration: none;
}

/* Set gear icon hover color */
.ms-siteactions-normal > a:hover:before {
	color: #7AC7FF;
}

/* Remove OOTB Site Actions hover */
.ms-siteactions-hover {
	background: transparent;
	border-right-color: transparent;
}

You are done! Now I will say I don’t use FontAwesome as described on their site. Their site suggests adding mark-up and in SharePoint, we don’t often have that luxury. The way I use it above via a :before pseudo element is completely supported, and is just another way to do things.

Option 2

Option 2 is similar to option 1 in that we will hide the default gear icon and set something new. Instead of using an icon font, you could use a custom image. All you need is the following code, updating the image URLs on lines 9 and 17.

/* Hide Site Actions gear icon */
.ms-siteactions-imgspan {
	display: none;
}

/* Insert new Site Actions image */
.ms-siteactions-normal > a:before {
	content: "";  /* Required for pseudo element */
	background: url("http://placekitten.com/g/20/20");  /* Image URL */
	height: 20px;  /* Height of image */
	width: 20px;  /* Width of image */
	display: block;  /* Forces respect of width and height */
}

/* Set Site Actions image hover */
.ms-siteactions-normal > a:hover:before {
	background: url("http://placecage.com/20/20");  /* Hover image URL */
}

/* Remove OOTB Site Actions hover */
.ms-siteactions-hover {
	background: transparent;
	border-right-color: transparent;
}

That’s it!