如何用很棒的字体替换默认的 woocommerce 星级评分图标？

Question

我正在尝试使用超棒的字体图标更改默认的 woocommerce 星级评分图标

但是 fontawesome 代码放置了错误的图标，而不是我需要的图标

attached image

我想用实心圆圈替换星星，但我得到的图标是一个空心圆圈。

可能是fontawesome版本的问题？知道如何解决这个问题吗？

因为我为我需要的填充图标找到的 css 内容代码实际上是我在 css 类中用来替换星星图标的代码：

.woocommerce .star-rating:before{
    font-family: 'FontAwesome' !important; 
    content: '\f111\f111\f111\f111\f111' !important;
    color: #d5d5d5 !important;
}

.woocommerce .star-rating span:before{
    font-family: 'FontAwesome' !important; 
    content: '\f111\f111\f111\f111\f111' !important;
    color: #FF9800 !important;
}

但我得到的只是空圆圈。

Answer 1

您使用了错误的代码。

.woocommerce .star-rating:before {
  font-family: 'FontAwesome' !important;
  content: '\f10c\f10c\f10c\f10c\f10c' !important;
  color: #d5d5d5 !important;
}

.woocommerce .star-rating span:before {
  font-family: 'FontAwesome' !important;
  content: '\f111\f111\f111\f111\f111' !important;
  color: #FF9800 !important;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="woocommerce">
  <div class="star-rating"><span></span></div>
</div>

如何用很棒的字体替换默认的 woocommerce 星级评分图标？

how to replace default woocomerce star raiting icon with fontawesome?

css

wordpress

icons

font-awesome