Support for font-awesome 5 support

[Hemanth089]

Hi,

Can you add font-awesome 5 support for this plugin?

[sergiu-popa]

Edit fontawesome-stars.css and change the font name:

.br-theme-fontawesome-stars .br-widget a {
  font: normal normal normal 20px/1 Font Awesome\ 5 Free;
  ...
}

[hepabolu]

@sergiu-popa Not entirely true. More is needed.

For those who want to use this, first read the page on FontAwesome 5.com how to use pseudo-elements: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements

This explains what to do.

This comes down to 2 steps:

1. Add a

<script>
  FontAwesomeConfig = { searchPseudoElements: true };
</script>

2. Change the 'fontawesome-stars.css FontAwesome 4 used the same font with two different glyphs. FontAwesome 5 uses the same glyph but a different font family. So you need to include the correct font-family and and glyph code for the various css selectors.

Finally, I couldn't get the stars get the color as set in the various selectors, so I settled for a general color on the a element itself.

Here is my version:

.br-theme-fontawesome-stars .br-widget {
  height: 28px;
  white-space: nowrap;
}
.br-theme-fontawesome-stars .br-widget a {
  font: normal normal normal 20px/1 'FontAwesome 5 Regular';
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  color: #edb867;
  margin-right: 2px;
}
.br-theme-fontawesome-stars .br-widget a:after {
  font-family: 'Font Awesome 5 Regular';
  content: '\f005';
  color: #d2d2d2;
  display: none;
}
.br-theme-fontawesome-stars .br-widget a.br-active:after {
  font-family: 'Font Awesome 5 Solid';
  content: '\f005';
  color: #edb867;
}
.br-theme-fontawesome-stars .br-widget a.br-selected:after {
  font-family: 'Font Awesome 5 Solid';
  content: '\f005';
  color: #edb867;
}
.br-theme-fontawesome-stars .br-widget .br-current-rating {
  display: none;
}
.br-theme-fontawesome-stars .br-readonly a {
  cursor: default;
}
@media print {
  .br-theme-fontawesome-stars .br-widget a:after {
    font-family: 'Font Awesome 5 Regular';
    content: '\f005';
    color: black;
  }
  .br-theme-fontawesome-stars .br-widget a.br-active:after,
  .br-theme-fontawesome-stars .br-widget a.br-selected:after {
    font-family: 'Font Awesome 5 Solid';
    content: '\f005';
    color: black;
  }
}

[eriktelepovsky]

Font Awesome 5 Pro support:

.br-theme-fontawesome-stars .br-widget {
  height: 28px;
  white-space: nowrap;
}
.br-theme-fontawesome-stars .br-widget a {
  font: normal normal normal 20px/1 'Font Awesome 5 Pro';
  font-weight: 500;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  color: #edb867;
  margin-right: 2px;
}
.br-theme-fontawesome-stars .br-widget a:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  content: '\f005';
  color: #d2d2d2;
}
.br-theme-fontawesome-stars .br-widget a.br-active:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  content: '\f005';
  color: #edb867;
}
.br-theme-fontawesome-stars .br-widget a.br-selected:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  content: '\f005';
  color: #edb867;
}
.br-theme-fontawesome-stars .br-widget .br-current-rating {
  display: none;
}
.br-theme-fontawesome-stars .br-readonly a {
  cursor: default;
}
@media print {
  .br-theme-fontawesome-stars .br-widget a:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 500;
    content: '\f005';
    color: black;
  }
  .br-theme-fontawesome-stars .br-widget a.br-active:after,
  .br-theme-fontawesome-stars .br-widget a.br-selected:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f005';
    color: black;
  }
}

[jcugley]

@sergiu-popa @hepabolu @eriktelepovsky

I tried all your fixes for FA5 support. None worked for me :(

Would love to see this added in... I had a try at doing it myself, but honestly I had no idea where to start.

[derebaba]

Hi @hepabolu,

Does your fix work with fractional star ratings?

Edit: I included first FA4.css then FA5.css, and it worked. All icons are FA5 except bar-ratings which are FA4. Just curious if it is possible to include only FA5.

[hepabolu]

I didn’t have the need to select half stars, only to display them. And that worked.

But eventually I solved it differently.

On Mon, 11 Jun 2018 at 13:05, Erdem Derebaşoğlu [email protected] wrote:

Hi @hepabolu https://github.com/hepabolu,

Does your fix work with fractional star ratings?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/antennaio/jquery-bar-rating/issues/103#issuecomment-396206038, or mute the thread https://github.com/notifications/unsubscribe-auth/AHIOqpMclTBaX48-58Qb07rNn6g1kVLJks5t7k77gaJpZM4RY-vt .

-- Bye, hepabolu

[bdavies]

The following worked for us, including support for partial-stars:

.br-theme-fontawesome-stars-o .br-widget {
  height: 28px;
  white-space: nowrap;
}
.br-theme-fontawesome-stars-o .br-widget a {
  font: normal normal normal 13px/1 'Font Awesome 5 Pro';
  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 Pro";
  font-weight: 900;
  content: '\f005';
  color: #d2d2d2;
}
.br-theme-fontawesome-stars-o .br-widget a.br-active:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  content: '\f005';
  color: #FFB600;
}
.br-theme-fontawesome-stars-o .br-widget a.br-selected:after {
  font-family: 'Font Awesome 5 Pro';
  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;
}```