Display rated star by Font Awesome scss - lustan3216/BlogArticle GitHub Wiki

須先載入Font Awesome，再新增一個scss檔且直接複製以下檔案進去即可。 使用方式

<div class="show_rated_1</div>   顯示1顆實心星星4個空心星星
<div class="show_rated_3.5"></div>  顯示3.5顆實心星星1.5個空心星星

[class^="show_rated_"]{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 15px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  moz-osx-font-smoothing: grayscale;
  color: $main_red;
  margin-top: 5px;
  letter-spacing: 5px;
}
.show_rated_0::before{
  content: "\f006 \f006 \f006 \f006 \f006";
}
.show_rated_0_5::before{
  content: "\f123 \f006 \f006 \f006 \f006";
}
.show_rated_1::before{
  content: "\f005 \f006 \f006 \f006 \f006";
}
.show_rated_1_5::before{
  content: "\f005 \f123 \f006 \f006 \f006";
}
.show_rated_2::before{
  content: "\f005 \f005 \f006 \f006 \f006";
}
.show_rated_2_5::before{
  content: "\f005 \f005 \f123 \f006 \f006";
}
.show_rated_3::before{
  content: "\f005 \f005 \f005 \f006 \f006";
}
.show_rated_3_5::before{
  content: "\f005 \f005 \f005 \f123 \f006";
}
.show_rated_4::before{
  content: "\f005 \f005 \f005 \f005 \f006";
}
.show_rated_4_5::before{
  content: "\f005 \f005 \f005 \f005 \f123";
}
.show_rated_5::before{
  content: "\f005 \f005 \f005 \f005 \f005";
}
⚠️ **GitHub.com Fallback** ⚠️