Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

rating in-house component not showing in v8.2.0


<div class="rating">
<div class="rating-label me-2 checked">
<i class="bi bi-star fs-2"></i>
</div>
<div class="rating-label me-2 checked">
<i class="bi bi-star fs-2"></i>
</div>
<div class="rating-label me-2 checked">
<i class="bi bi-star fs-2"></i>
</div>
<div class="rating-label me-2">
<i class="bi bi-star fs-2"></i>
</div>
<div class="rating-label me-2">
<i class="bi bi-star fs-2"></i>
</div>
</div>

The above not displaying correctly in the current version


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


Hi,

It seems Bootstrap Icons' recent update comes with star icons class name changes.

You can try to use the rating with our in-house KeenIcons as shown in the Metronic Docs

Regards.




<div class="rating">
<div class="rating-label me-2 checked">
<i class="bi bi-star fs-1"></i>
</div>
<div class="rating-label me-2 checked">
<i class="bi bi-star fs-1"></i>
</div>
<div class="rating-label me-2 checked">
<i class="bi bi-star fs-1"></i>
</div>
<div class="rating-label me-2 checked">
<i class="bi bi-star fs-1"></i>
</div>
<div class="rating-label me-2 checked">
<i class="bi bi-star fs-1"></i>
</div>
</div>


I used the above as stated by the Metronic Docs but it displays boxes instead of the stars



Hi,

We have tested the above code with Metronic v8.2.0 and it works fine. Can you double-check your code? Have you changed anything in your build? It seems Bootstrap Icons are not loaded on your page.



Please check it with the original Metronic v8.2.0 and it should work as expected.

If you need any further help please let us know your build method(gulp or webpack).

Regards.



I am using the laravel version, it was working fine in the v8.1.9 but its not working any more in version v8.2.0. i used webpack.



i had to include the CDN below below it works:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<script src="https://kit.fontawesome.com/cbd6d74aa8.js" crossorigin="anonymous"></script>



Hi,

Thank you for the heads-up.

Noted, we will double-check it and fix the missing icons for Laravel Starter Kit in the next update.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(