How to add star symbols for ratings in my wordpress site

HTML & CSS
1

Hello all, I’m currently having troubles adding stars to my website for its rating system. I just took over in developing the website but I am still a novice in HTML coding as I am not familiar with the PHP language. The previous developers has a rating system but recently, the code got messed up and the stars are not showing up. Not only that, a few other symbols have gone missing, like the arrow button to move to the next page. I need help and I’ll thank you all in advance :slight_smile: .

I have attached the link to view the stars. It is at the bottom. Currently, it is 5 yellow rectangular boxes. You can click on Groceries at the home page to view the missing next page icon. It is currently just a white box now.

Link: https://cavemen.com.sg/product/champagne/

Missing star symbols:

image
image843×277 2.51 KB

2

The star is set to be the character “f006” in the font “AvantGarde-Demi”.

Does that font family really contain a star character?

I know e.g. “FontAwesome” has a star character as that UTF* number.

*) The UTF-16 number escaped as content in CSS: "\f006".

EDIT)

Should have checked the source code of the page. :blush:

The font-family I mentioned is actually avaiable to use already, so the solution could be to add one line in the CSS like:

.woocommerce p.stars a::before, 
.woocommerce p.stars a:hover ~ a::before {
	content: "\f006";
	font-family: FontAwesome;
}
1 Like
3

It’s working now Erik! Thanks! Cheers.

1 Like
4

However, Erik, the next page in my website which I referred to earlier remains unfixed…

I’ve attached an image to what it looks like and I’ll link the site to you. If you could help that’d be awesome!

image

link: https://cavemen.com.sg/product-category/groceries-food-pantry/page/2/

6

The anchors’ parent container has a line-height of 1.2em but its inline-block children has its own line-height 40px that affects their content. The end boxes are empty so they doesn’t get the same baseline level as those with numbers.

Though you could get the empty boxes aligned by the “vertical-align” property:

.nav-links .page-numbers {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border: 1px solid #ddd;
	margin: 0 2px;
	font-size: 12px;
	vertical-align: middle; /* add this if there are empty child anchors */
}

However, if you give also those end anchors a content that can be affected by the anchors own line-height (e.g. the sign “<” and “>”) they will align by them selves.

1 Like
7

You could give them a pseudo content when they appear:
(Please note the two-class combo or use only their single classes .prev or .next.)


.nav-links .prev.page-numbers::before {
	content: "<";
}
.nav-links .next.page-numbers::before {
	content: ">";
}
2 Likes
8

That’s awesome Erik. Thank you for your help :).

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.