How to use font Awesome instead of images in jquery rating stars
我使用 jquery.raty.min.js 来显示星级,在 js 方法中,我可以选择更改显示开始图像,如
1 2 3 | starOff:"/images/star_none.png", starOn:"/images/star_full.png" |
但在这里我想使用像
这样的字体 Awesome 类
1 2 | <i class="fa fa-star-o"> <i class="fa fa-star"> |
我试过像下面这样放置类
1 2 3 | starOff:"<i class='fa fa-star-o'>", starOn:"<i class='fa fa-star'>" |
但它不起作用任何人都可以帮助这样做。
对这个问题的简短回答是使用 Raty (2.7.0) 的最新更新(截至本回复的最后一次编辑)并查看"starType"属性。当您设置元素时,您将执行以下操作:
1 2 3 4 | $('div').raty({ // This is the config you need to change the tag from image to icon starType : 'i' }); |
这里有更多细节... 如果您查看 CSS 文件和字体文件,您将看到它们如何设置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | .cancel-on-png, .cancel-off-png, .star-on-png, .star-off-png, .star-half-png { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; /*This is the important part*/ font-family:"FontAwesome"; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; } .cancel-on-png:before { /*the"\\f057" represents an unfilled circle with an x in it*/ /*each of these can be configured to be whichever icon you would like*/ /*fore more information on the icon code, look at the link listed below*/ content:"\\f057"; } .cancel-off-png:before { content:"\\f05c"; } .star-on-png:before { content:"\\f005"; } .star-off-png:before { content:"\\f006"; } .star-half-png:before { content:"\\f123"; } |
可以在此处找到 FontAwesome 的 CSS 内容值的完整列表
最终产品看起来像这样:
1 2 3 4 5 6 7 | <i title="Cancel this rating!" class="raty-cancel cancel-off-png" data-alt="x"> <i data-alt="1" class="star-off-png" title="Bad"> <i data-alt="2" class="star-off-png" title="Below Average"> <i data-alt="3" class="star-off-png" title="Average"> <i data-alt="4" class="star-off-png" title="Above Average"> <i data-alt="5" class="star-off-png" title="Great"> <input name="score" type="hidden"> |
当这样配置时:
1 2 3 4 5 6 7 8 9 10 11 | $(div).raty({ readOnly : readOnly, cancel : !readOnly, noRatedMsg : 'This component has not been rated yet', half : true, starType : 'i', hints : ['Bad', 'Below Average', 'Average', 'Above Average', 'Great'], click : function(score, event) { console.log("The score is:", score); } }); |
我知道已经 3 个月了,但我希望这对某人有所帮助!
我认为不修改插件本身的简单方法是不存在的。如果您查看
1 | $('<img />', { src : icon, alt: i, title: title }).appendTo(this); |
那就是创建图像元素,
您需要做的是创建图标。我认为将其更改为以下内容:
1 | $('<i />', { class : icon }).appendTo(this); |
但用法是:
1 2 3 | starOff:"fa fa-star-o", starOn:"fa fa-star" |
我还没有测试过,但这应该是一个开始,可能你需要用 CSS 调整图标外观
也许我无法理解现有答案的要点,但我发现在 2.7.1 版本中使用 fontawesome 图标并不难。
这是我的代码。
html:
1 |
css:
1 2 3 4 | .score-star { color: #07b062; font-size: 1.5em; } |
js:
1 2 3 4 5 6 7 8 | $('.score-star').each(function () { $(this).raty({ number: 5, starType: 'i', starOff: 'fa fa-star-o', starOn: 'fa fa-star' }); }); |
raty:
1 2 | <link href="//cdn.bootcss.com/raty/2.7.1/jquery.raty.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/raty/2.7.1/jquery.raty.min.js"> |
真棒:
1 | <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> |
希望对您有所帮助。
使用 font awesome 5,代码应如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .star-on-png, .star-off-png, .star-half-png { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; /*This is the important part*/ font-family: 'Font Awesome 5 Free'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; } .star-on-png:before { content:"\\f005"; font-weight: 900; } .star-off-png:before { content:"\\f005"; } .star-half-png:before { content:"\\f5c0"; font-weight: 900; } |
请检查字体大小和颜色。添加属性字体大小和颜色。