React-fontawesome: How to add far-star?

[francesco87]

How can I show in my react project "far-star" icon (empty star icon with only borders)?

[robmadole]

Hi @francesco87 what have you tried so far?

[francesco87]

importing '@fortawesome/free-solid-svg-icons' I found faStar and faStarHalfAlt but I can't found farStar it is the empty start with only border.

[robmadole]

The regular style of the star icon is available from the @fortawesome/free-regular-svg-icons package. Try that and see if you can find what you need.

[richardsondx]

+1 instructions are not clear for far icons

[yehee]

+1 towards mending documentation although the package name itself is self-explanatory

[MorenoMdz]

Just adding to this, I feel the icons library that can be used is not clear at all. Docs need a bit more info in which icons can be used and provide links to its gallery if possible.

[mohdafzal330]

No solution provided yet ?

[robmadole]

@mohdafzal330 what have you tried that isn't working?

[mohdafzal330]

@robmadole what have you tried that isn't working?

@robmadole , I did find any icon in react similar to fa-star-o

[robmadole]

@mohdafzal330

import { faStar } from '@fortawesome/free-regular-svg-icons'

[mohdafzal330]

@robmadole while importing faStar , it gives us filled star, But I need empty star

[francesco87]

solved

[mohdafzal330]

Let me check

[DAVIS-PYTH]

@francesco87 how did you solve that

[joshharper1]

@francesco87 how did you solve that

Apologies if this has been answered but here is how I managed to work around this issue.

I used npm to install 'npm i --save @fortawesome/free-regular-svg-icons' & 'npm i --save @fortawesome/free-solid-svg-icons'. I then created a library so I could have two variations of one icon (faStar) and added both of them like so;

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from '@fortawesome/fontawesome-svg-core'
import { faStar as fasFaStar } from '@fortawesome/free-solid-svg-icons'
import { faStar as farFaStar } from '@fortawesome/free-regular-svg-icons'
import { faStarHalfAlt} from "@fortawesome/free-solid-svg-icons";
library.add(fasFaStar, farFaStar, faStarHalfAlt)

Hope this helps.

[Mocarram]

Add regular styles first :
yarn add @fortawesome/free-regular-svg-icons

Import to a component:
import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";