Добавьте эффект наведения к Font Awesome Stars

Question

Я бы хотел простой метод, при котором вы наводите курсор на них, и они отображаются сплошным желтым цветом.

const styles = theme => ({
  root: {
    flexGrow: 1,
    overflow: 'hidden',
    padding: theme.spacing(0, 3),
  },
  paper: {
    maxWidth: 800,
    margin: `${theme.spacing(2)}px auto`,
    padding: theme.spacing(2),
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
  playButton: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
    "& .playButton": {
      position: "absolute",
      top: "60%",
      left: "-55px",
      transform: "translateY(-50%)",
    },
  }
});

function Tasks(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
              <div className="name-label">
              Name
              </div>
              <Typography variant="h6" gutterBottom>
              {props.name}
              </Typography>
              <div className="form-divider"></div>
                <Typography variant="body2" color="textSecondary">
                {props.description}
                </Typography>
              </Grid>
            </Grid>
            <Grid item classes={{ root: props.classes.playButton}}>
    <Grid item xs={3} className="playButton">
      <i class="far fa-play-circle fa-2x"></i>
    </Grid>
    <div className="workers-assigned-label">
      Workers Assigned
    </div>
    <Typography variant="h6" gutterBottom>
        0/25
      </Typography>
      <div class="star-rating">
        <label class="far fa-star fa-2x"></label>
        <label class="far fa-star fa-2x"></label>
        <label class="far fa-star fa-2x"></label>
      </div>
    <div>
      unassigned
    </div>
  </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

export default withStyles(styles)(Tasks);

Если у кого-то есть какие-либо предложения относительно того, как заставить их измениться с https://fontawesome.com/v4.7.0/icon/star-o на заполнение центра желтым, это было бы очень полезно. Лучше всего это сделать с помощью CSS или с помощью React.

Answer 1

Взглянув на содержимое этого конкретного шрифта, вы будете использовать 2 content: "\f006" и content: "\f005". f005 - заполненная звезда, которую вы хотите пожелтеть.

const styles = theme => ({
  playButton: {
    "& .rating": {
      
      "& .fa-star-o": {
        "&:hover": {
          "&::before": {
            content: "\f005",
            color: "yellow"
          }
        }
      }
      
    },
  },
});

И, как сказал другой человек, убедитесь, что пакет работает.

Answer 2

Вы проверяли версию Font Awesome, которую вы используете?Этот значок, кажется, в 4.7.0.У меня было несколько проблем с иконками, которые не отображались, и обычно это происходило из-за того, что я использовал устаревшую версию, или иконка, которую я хотел использовать, была в более новой версии Font Awesome.

И если вы используете более новую версию, проверьте, существует ли значок для этой версии, возможно, он был удален или переименован.