Add Hover effect to Font Awesome Stars - css

Question

I would like a simple method, whereby you hover over them and they are a solid yellow.
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);
If anyone has any suggestions as to how to get them to change from https://fontawesome.com/v4.7.0/icon/star-o to having the centre fill with yellow that would be much appreciated. Whether it be best done with CSS or something using React.

Answer 1

Taking a look at the content of that particular font, the 2 you'll use are content: "\f006" and content: "\f005". f005 is the filled star that you'll want to turn yellow.
const styles = theme => ({
playButton: {
"& .rating": {
"& .fa-star-o": {
"&:hover": {
"&::before": {
content: "\f005",
color: "yellow"
}
}
}
},
},
});
And like the other person said, make sure the package is working.

Answer 2

Did you check the version of Font Awesome you use? This icon seems to be in the 4.7.0. I've had multiple problems with icons not showing and usually it was because I was using an outdated version or the icon I wanted to use was in a newer version of Font Awesome.
And if you use a newer one, check if the icon still exists for this version, it may have been removed or renamed.