通过改变<i>标签中的class样式来控制星星个数:
class="star-on-png" 代表一星 class="star-half-png" 代表半颗星class="star-off-png" 代表零颗星效果图:(颜色可通过修改下面css中的颜色属性任意修改,大小可通过修改下面css中的字体font-size:1.3em;来改变) 一、css <style type="text/css"> .cancel-off-png,.cancel-on-png,.star-half-png,.star-off-png,.star-on-png { font-size:1.3em; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; font-family:FontAwesome; font-style:normal; font-variant:normal; font-weight:400; line-height:1; speak:none; text-transform:none; color:#777 } .star-on-png { color:#FEB902 } .star-on-png:before { content:"\f005" } .star-off-png { color:#777 } .star-off-png:before { content:"\f006" } .star-half-png { color:#FEB902 } .star-half-png:before { content:"\f123" } </style> 二、HTML页面标签 <i class="star-on-png" ></i> <i class="star-on-png" ></i> <i class="star-half-png" ></i> <i class="star-off-png"></i> <i class="star-off-png"></i>