WP Ninja Forms Star Rating with FontAwesome Replacement Stars

One of the most popular posts on this blog (and one of my most popular pens on CodePen) is replacing bullet list item styles with Font Awesome icons. I figured I’d follow that up with replacing the star rating system that comes with WordPress’s Ninja Forms with Font Awesome stars.

The Setup

So, out of the box Ninja Forms comes with a star rating field. While that’s fantastic, the style of the field leaves a little bit to be desired.

Let’s see if we can’t spruce that up a bit with Font Awesome stars – although you could use any icon you want!

The HTML

Ninja Forms provides the HTML for this one. I won’t get into the dynamics of what is causing the star rating to change when you click on it. Let’s just say that we have 5 star divs and each of them has a “star” class on them. When you click on a star, that star and each one before it gets a “fullstar” class applied to it. That’s what we’ll use to determine whether to show an empty star or a full one.

The CSS

We’re simply going to build off of the existing styles from Ninja Forms and override what we need, so here is the CSS for the “star” div itself:

a.star {
	width: 40px;
	height: 40px;
	background: none;
	margin: 0 0.25em 0 0;
	position: relative;
}

As you can see here, I’m just adjusting the height and width a bit to make the stars – well, where they will go – a tiny bit larger than the default. I’m also clearing out the background that is there now and providing a bit of margin between them. The relative positioning comes in handy when you’re ready to add the stars themselves as “:after” pseudo-elements.

a.star:after {
	content: '\f006';
	font-family: "FontAwesome";
	position: absolute;
	top: 0;
	left: 0;
	font-size: 40px;
	line-height: 1;
	color: yellow;
}

This is where the real magic happens.

First things first, the “content” attribute defines the icon that will be used (you can find these here) and the font family is set to use the “Font Awesome” font. Note: you will need to add Font Awesome – preferably from a CDN – before you can do this! You can get the FontAwesome script on CDNjs.com.

Once those are set, the after element (the icon) is positioned in the top left corner – relative to the “star” div – and the font size is set to the height of the container. The line-height is set to “1” to force it to fit properly and the color can be whatever you’d like it to be!

What you should have now is a star rating of 5 Font Awesome empty stars.

Let’s see how we can quickly fill in the “fullstar” stars….

a.star.fullStar:after {
	content: '\f005';
}

Yes, that’s it. All you have to do is swap out the “empty” star for a “full” one in the pseudo-element and you’re golden!

Demo (Final Product)

Here’s a CodePen demo that shows the final (non-dynamic) product:

See the Pen WP Ninja Forms Star Rating with FontAwesome Replacement Stars by Marcus Burnette (@mburnette) on CodePen.