css - WooCommerce 星号符号显示为框图标

Question

我已经阅读了之前有关 wooCommerce 明星问题的帖子，但无法帮助自己解决此问题。对于任何裁员，我深表歉意。我是一名老师，对 css 很陌生。这是我的问题:

我正在为我的网站使用 Mystile 主题 k12movieguides.com我梳理了 style.css 文件的 wooCommerce 部分。我让星星在各个产品页面和评论区域正常工作，但我不知道如何让星星显示在商店和主页的产品缩略图下，每个产品旁边都有多个产品。我看到的不是星星，而是一个通用的框图标。

Here is a screenshot of the box icons, I've tried to use chrome's inspect feature to figure out what is going wrong with class="rating" but I can't figure it out.

这是 WooCommerce 部分下 style.css 中的完整代码。如果需要任何其他信息来帮助解决此问题，请告诉我。非常感谢您的时间和才华。

/*-------------------------------------------------------------------------------------------*/
/* 7. WOOCOMMERCE */
/*-------------------------------------------------------------------------------------------*/
p.demo_store {
  background: #4d65a4;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  padding: 1em;
}
.homepage-banner {
  display: none;
}


/* ==========================================================================
	Snippet Name: WooCommerce Review Star Ratings
	Description:  This css snippet blends all woocommerce star rating for a consistant look sitewide. Consolidates code and makes uses of WooCommerce.eot font. If you disabled the woocommerce.css and built your own styles then this will work great. If you are overriding woocommerce.css by adding styles to another styesheet that loads afterwards, this will still work fine, but you may need to target specific elements or create a master reset targeting all elements listed below in order to remove some of woocommerce default margins and padding.
	Author:       GL Walker
	Author URI:   http://wsfive.com
   ========================================================================== */


.woocommerce .star-rating, .woocommerce p.stars [class^="star-"], .woocommerce p.stars [class*=" star-"] {
	font-family: WooCommerce;
	speak: none;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	font-size: 1em;
}
.woocommerce .star-rating {
	overflow: hidden;
	position: relative;
	height: 1em;
	width: 5em;
}
.woocommerce .star-rating:before {
	content: "\e021\e021\e021\e021\e021";
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	color: #999;
}
.woocommerce .star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em
}
.woocommerce .star-rating span:before {
	content: "\e020\e020\e020\e020\e020";
	top: 0;
	position: absolute;
	left: 0;
	color: #F90;
}
/* rating block specific to single product summary area */
.woocommerce .woocommerce-product-rating {
	display: block;
	width: 100%;
}
.woocommerce .woocommerce-product-rating .star-rating {
	margin: 0 auto;
	float: left;
	font-size: 1em;
}
.woocommerce .woocommerce-product-rating .woocommerce-review-link {
	font-size: 85%;
	width: 100%;
	margin: 0.5em 0;
	float: left;
}
/* rating block specific to review submit form */
.woocommerce p.stars {
	position: relative;
	padding: 0.75em;
}
.woocommerce p.stars a {
	display: inline-block;
	margin-right: 1em;
	text-indent: -9999px;
	position: relative;
	border-bottom: 0!important;
	outline: 0;
	color: #999;
}
.woocommerce p.stars a:hover, .woocommerce p.stars a.active {
	color: #F90;
}
.woocommerce p.stars a:last-child {
	border-right: 0
}
.woocommerce p.stars [class^="star-"], .woocommerce p.stars [class*=" star-"] {
	border-right: 1px solid #ccc
}
.woocommerce p.stars [class^="star-"]:after, .woocommerce p.stars [class*=" star-"]:after {
	text-indent: 0;
	position: absolute;
	top: 0;
	left: 0
}
.woocommerce p.stars a.star-1 {
	width: 2em
}
.woocommerce p.stars a.star-1:after {
	content: "\e021"
}
.woocommerce p.stars a.star-1.active:after, .woocommerce p.stars a.star-1:hover:after {
	content: "\e020"
}
.woocommerce p.stars a.star-2 {
	width: 3em
}
.woocommerce p.stars a.star-2:after {
	content: "\e021\e021"
}
.woocommerce p.stars a.star-2.active:after, .woocommerce p.stars a.star-2:hover:after {
	content: "\e020\e020"
}
.woocommerce p.stars a.star-3 {
	width: 4em
}
.woocommerce p.stars a.star-3:after {
	content: "\e021\e021\e021"
}
.woocommerce p.stars a.star-3.active:after, .woocommerce p.stars a.star-3:hover:after {
	content: "\e020\e020\e020"
}
.woocommerce p.stars a.star-4 {
	width: 5em
}
.woocommerce p.stars a.star-4:after {
	content: "\e021\e021\e021\e021"
}
.woocommerce p.stars a.star-4.active:after, .woocommerce p.stars a.star-4:hover:after {
	content: "\e020\e020\e020\e020"
}
.woocommerce p.stars a.star-5 {
	width: 6em;
}
.woocommerce p.stars a.star-5:after {
	content: "\e021\e021\e021\e021\e021"
}
.woocommerce p.stars a.star-5.active:after, .woocommerce p.stars a.star-5:hover:after {
	content: "\e020\e020\e020\e020\e020"
}
/* rating block specific to product listing */
.woocommerce ul.products li.product .star-rating {
	display: block;
	text-align: center;
	margin: 0 auto;
}
/* rating block specific to sidebar widgets */
.woocommerce ul.cart_list li .star-rating, .woocommerce ul.product_list_widget li .star-rating {
	display: block;
	text-align: center;
	margin: 0 auto;
}
/* end of review stars */



div.quantity {
  white-space: nowrap;
  /* Disable input[type=number] buttons until the world is ready */
}
div.quantity input::-webkit-outer-spin-button,
div.quantity input::-webkit-inner-spin-button {
  display: none;
}
div.quantity .plus,
div.quantity .minus {
  font-family: 'WooCommerce';
  background: none;
  border: none;
  font-size: 1.387em;
  padding: 0;
  color: #ff4800;
  -webkit-transition: all ease-in-out 0.2s;
  -moz-transition: all ease-in-out 0.2s;
  -ms-transition: all ease-in-out 0.2s;
  -o-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
}
div.quantity .plus:hover,
div.quantity .minus:hover {
  color: #dd2600;
}
div.quantity .qty {
  margin: 0 .618em;
  width: 2.618em;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
table div.quantity {
  font-size: .857em;
}
.single-product div.quantity {
  float: left;
  margin-right: 1.618em;
  border-right: 4px double #e8e4e3;
  padding-right: 1.618em;
}
.single-product table div.quantity {
  padding-right: 0;
  border: 0;
}
.single-product #reviews .star-rating {
  float: right;
}
.single-product .single_variation .price {
  display: block;
  margin-bottom: .618em;
}
dl.variation dt,
dl.variation dd {
  float: left;
}
dl.variation dt {
  clear: left;
  margin-right: .53em;
}
dl.variation dd ul {
  list-style: none;
}
.backorder_notification {
  clear: both;
}
.validate-required.woocommerce-validated input {
  border-color: #84ac50;
  background: #e5eeda;
}
.validate-required.woocommerce-invalid input {
  border-color: #b85f56;
  background: #f4e7e6;
}

Answer 1

这是此错误的解决方法，而不是解决方案，但在更聪明的人找出真正的答案之前，它可能是一个有用的临时垫片。

使用FontAwesome图标集，您可以使用它们的星星来替换缺失的星星。

以下是成功安装 FontAwesome 后所需的 CSS。

/* Base */
p.stars.selected a.active~a:before,
p.stars:hover a:before,
p.stars a:before, 
p.stars a:hover~a:before,
p.stars.selected a:not(.active):before, 
p.stars.selected a.active:before { 
font-family: fontawesome;
}

/* Empty Stars */
p.stars a:before,
p.stars a:hover~a:before, 
p.stars.selected a.active~a:before {
    content: "\f006";
}

/* Filled Stars */
p.stars:hover a:before, 
p.stars.selected a:not(.active):before, 
p.stars.selected a.active:before {
    content: "\f005";   
}