0

I am editing the CSS on my site, and want to make the bullets that appear next to my "likes" appear as a Font Awesome Heart (link)

I use the following code in my CSS:

span.dots ::before { 
font-family: 'FontAwesome';
content: '\f004';
    font-size: 15px;
color: #f00;
}

The class of the <span> is dots, so thats what I am targeting.

The heart appears fine, but it's a full heart, not a bordered hear with a hollowed out center. To get the style I want usually you have to switch the class to "fas fa-heart" but let's assume all I can do is edit the CSS.

Any ideas?

logos_164
  • 736
  • 1
  • 13
  • 31

1 Answers1

0

Do you have the the entire FontAwesome family installed? If you do, then it could be a font-weight issue. Try:

span.dots ::before { 
font-family: 'FontAwesome';
content: '\f004';
font-weight:400;
    font-size: 15px;
color: #f00;
}

If you take a look at the FontAwesome CSS file it tells you which style to use if you have the entire font family in the css.

StephenB
  • 166
  • 2
  • 14