Open cjwilson1 opened 5 years ago
first, replaced the fontawesome-stars-o.css as the following:
.br-theme-fontawesome-stars-o .br-widget {
height: 28px;
white-space: nowrap;
}
.br-theme-fontawesome-stars-o .br-widget a {
font: normal normal normal 17px/1 'Font Awesome 5 Free';
font-weight: 500;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-decoration: none;
color: #FFB600;
margin-right: 4px;
}
.br-theme-fontawesome-stars-o .br-widget a:after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f005';
color: #d2d2d2;
}
.br-theme-fontawesome-stars-o .br-widget a.br-active:after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f005';
color: #FFB600;
}
.br-theme-fontawesome-stars-o .br-widget a.br-selected:after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f005';
color: #FFB600;
}
.br-theme-fontawesome-stars-o .br-widget .br-current-rating {
display: none;
}
.br-theme-fontawesome-stars-o .br-readonly a {
cursor: default;
}
.br-theme-fontawesome-stars-o .br-widget a.br-fractional:after {
font-weight: 900;
content: '\f089';
color: #FFB600;
}
then, in your front-end page, you should use font awesome CSS from their official CDN
<!--font-awesome package-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
finally, you can use it
$('#YourComponentID').barrating({
theme: 'fontawesome-stars-o',
readonly: true,
initialRating: 4.5
});
it works fine for me.
I choose this library because I needed fractional values 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5.
I noticed fractional values are not working on the main examples page.
However, I tried using it anyway and i am getting the same issues. You cannot select half stars and in order to have 1-5 with half star values you must have 10 options. But all 10 stars are displayed.
Was fractional values ever fully implemented?
Thanks