Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, one example shows a rating with all full stars:
https://i.stack.imgur.com/qASit.png
and another example displays a rating with an empty star:
https://i.stack.imgur.com/RqrIF.png
The empty star appears to be separated by unwanted left-sided whitespace. This problem seems to only occur when utilizing the stars within a Vue loop, leading me to believe it may be related to Vue's virtual DOM. However, I am uncertain about the exact cause of this issue. Here is a snippet of my component code:
<template>
<span class="stars">
<span v-for="i in stars.full" class="fas fa-star" aria-hidden="true"></span>
<span v-for="i in stars.half" class="fas fa-star-half-alt" aria-hidden="true"></span>
<span v-for="i in stars.empty" class="far fa-star" aria-hidden="true"></span>
</span>
In this code snippet, full, half, and empty are simply integers representing the star ratings.