Font-awesome: Icon far fa-star not working

[ShoeLace1291]

I am trying to use the star icons to make an article rating system.If an article has 3/5 star rating, it shows 3 "fas fa-star" icons and 2 "far fa-star" icons. I assume that fas means solid, far means regular. The regular star icon is not showing up. It just shows up as an empty square outline. The solid star works fine. I am using webfonts.

Update: Even after switching to JS SVGs this is not working. Am I missing something?

[aizazshahid]

@ShoeLace1291 Actually in every font awesome icon there is a constant thing which is "fa", so we can say that it's a short-form of Font Awesome.
Try "fa fa-star", surely it will work.

Regards,
Aizaz

[ShoeLace1291]

@aizazshahid this is displaying the exact same icon as "fas fa-star" which is the solid and what I want is the "empty" star. From what I can remember, in v4.0, the class was fa-star-o for the empty star. This is what I want, but that code doesn't work in v5.

[aizazshahid]

@ShoeLace1291 my mistake i didn't know that. But, may be, this will solve your problem Upgrading from version 4

[Syed-Ibrahim]

This issue is not fixed yet. Latest Version 5.0.9 also having same issue. I cant able to select empty star.

[rywn]

I'm using these on my own project just fine, but I know it's pretty easy to accidentally override the font weight on these and result in a broken icon if you're using the CSS approach - not sure if that still happens with the SVG method though.

[julicamb]

I have the same issue
This works perfect:
<font-awesome-icon size="2x" :icon="['fas', 'heart']" />
But this gives me an error "Check not find one or more icon(s) "
<font-awesome-icon size="2x" :icon="['far', 'heart']" />

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Please provide all the information required by our bug report template

[danijelh]

I am having the same issue as @julicamb . Any solution or info so far?

[tagliala]

No feedback, closing here.

Please provide all the information required by our bug report template

[julicamb]

@DanijeIH
If I remember right you have to install the far icons yourself. When you install the package they aren’t included. But it’s an easy install, ‘npm install blablablafar’, but you’ll have to find that one yourself, I havan’t dealt with this package for months.

[julicamb]

So basically: This issue is easily fixable when you know how, I posted my solution in another issue with a similar issue I think. I apparently forgot to post it here too. When you find the exact steps, post them here for future reference.

[danijelh]

Yes, I figured it out.
There are two packages, "@fortawesome/free-solid-svg-icons"(fas) and "@fortawesome/free-regular-svg-icons"(far). Import needs to be done correctly from those packages in order for icons to work. I wish only if this was documented better.

import { faCheckSquare } from '@fortawesome/free-solid-svg-icons'
import { faCheckSquare as faCheckSquareRegular } from '@fortawesome/free-regular-svg-icons'

[tagliala]

This is documented at https://fontawesome.com/how-to-use/with-the-api/setup/importing-icons, at the very bottom of the page

To import the same icon from different styles

[danijelh]

@tagliala Thanks for the info! I wasn't able to find it but had to figure it out on my own. I am using this with Vue and was focusing on the Vue-Fontawesome part and searching something like that doesn't provide this info as plain. Just a suggestion, maybe if this were also added to https://github.com/FortAwesome/vue-fontawesome readme.

[mokhosh]

I had the same issue, thanks to @julicamb I added this line to my sass and fixed my problem:

@import "~@fortawesome/fontawesome-free/scss/regular";

[Bhonny]

Just simply link the css file this way

"project-folder/font-awesome-folder/css/all.css"

rather than

_"project-folder/font-awesome-folder/css/font-awesome.min.css"_

It perfectly work from my end:)

Happy New Year:

[assmabenmussa]

I hope you solved your issue, but for anyone still looking, simple add

 <script defer src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"></script>
 <script defer src="https://use.fontawesome.com/releases/v5.15.1/js/v4-shims.js"></script>

to your head element in the html, this worked for me