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

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 > 
<a href="" target="_blank"  rel="noreferrer noopener"></a> 
<a href="" target="_blank"  rel="noreferrer noopener"></a> 
<a href="" ></a> 
<a href="" ></a> 
<a href="" ></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;
}

CodePudding user response：

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.

CodePudding user response：

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;
}