[記事] Using awesome-font to create CSS rating bar

屬於阿宅世界的技術文章，想看的再點開，切莫自誤 !





Static

CSS
span.star:before {
  unicode-bidi: bidi-override;
  direction:rtl;
  font-size:14px;

  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  padding-right:5px;
}

span.star.empty:before{
  content:"\f006";
  color:red;
}

span.star.full:before {
  content:"\f005";
  color:red;
}

HTML
<span class="star full"></span><span class="star empty"></span><span class="star empty"></span><span class="star empty"></span><span class="star empty"></span>

Dynamic

CSS
.rating{
  unicode-bidi: bidi-override;
  direction:rtl;
  font-size:14px;
}

.rating span.star{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
}

.rating span.star:hover{
  cursor:pointer;
}
.rating span.star:before{
  content:"\f006";
  padding-right:5px;
  color:#999999;
}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{
  content:"\f005";
  color:#59a6d6;
}


HTML
<div class="rating">
  <span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
</div>