'fa fa-star make font awesome icon have an outline around the star

I have the icons set to highlight 1 > 2 > 3 > 4 > 5 stars consecutively for a rating. It works, but I am not able to put an outline on the star itself (not a square around the icon), so the star is invisible on a white background.

How do I set it so the star outline is yellow (or black) to be visible before it is hovered over?

<div class="rtg"> 
<a href="" target="_blank" class="fa fa-star-o" rel="noreferrer noopener"></a> 
<a href="" target="_blank" class="fa fa-star-o" rel="noreferrer noopener"></a> 
<a href="" class="fa fa-star-o"></a> 
<a href="" class="fa fa-star-o"></a> 
<a href="" class="fa fa-star-o"></a> </div>

.dm-rate-us .rtg {
    text-align: center;
    float: none;
    direction: rtl;
    margin-left: 0;
}

.fa-star-o:before {
    content: "\f005";
    font-family: 'Font Awesome 5' !important;
}
cssfont-awesome


Solution 1:[1]

Change the font-color to match the background, and remove that on hover.

So basically, assuming your background is white (#fff):

.fa-star-o {
  /* match the "base" state to the background */
  color: #fff;
}

.fa-star-o:hover {
  /* on hover, change to your "actual" color */
  color: #000;
}

There are interesting rules about links and font color and state (visited, active, etc), so you might want to consider changing your base tag to i like is usually used with icons.

Solution 2:[2]

Made it work:

changed content to ""?"; the hover still shows Font Awesome star, and functionally and visually works well together

.fa-star-o:before {
    content: "?";
    font-family: 'Font Awesome 5' !important;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Roddy of the Frozen Peas
Solution 2 Laura Pasqualone

Related Questions