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:

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:

• FontAwesome – link to the externally hosted font file and use freely in your CSS.
• Fontello – build and download icon web font files. Add the font files to your SharePoint site and reference it internally.  This may be best for intranets and similar sites if you run into issues with users being prompted to authenticate several times for their SharePoint site.
• Top 50 Free Icon Fonts for Web Design
• The Big List of Flat Icons & Icon Fonts

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:

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!