When I refer to font-awesome CSS file in my index.html:
<link
rel="stylesheet"
href="./node_modules/font-awesome/css/font-awesome.min.css"
/>
The font awesome icons will turn out ok.
However, if I import the font-awesome scss into my styles.scss and convert the styles.scss to styles.css, the value of the font-awesome icon will be a square with the actual value inside it. What appear in the webpage for the FA icon will also be a square with the value in it, instead of the actual FA icon.
styles.scss
@import '.././node_modules/font-awesome/scss/font-awesome.scss';
styles.css
.fa-home:before {
content: ""; //f015 inside the square
}
Correct value:
fa-home:before{
content:"\f015"
}
Any advice, please?
Thank you!