How to compile Fontawesome unique code with scss in css content - css

Question

I just wanted to add font awesome unique code with key-value pairs but when I am trying to do that it's changing
Ex.
content: ;
SCSS code
$socialMediaIcons: (facebook: '\f09a', twitter: '\f099', linkedin: '\f0e1');
#each $key,
$value in $socialMediaIcons {
.#{$key} {
&::before {
font-family: fontAwesome;
content: #{$value};
}
}
}
CSS compile code
.facebook::before {
font-family: fontAwesome;
content: ;
}
.twitter::before {
font-family: fontAwesome;
content: ;
}
.linkedin::before {
font-family: fontAwesome;
content: ;
}

Answer 1

I've solved the problem in my ways. Here is the solution:
At first, download the font-awesome toolkit from their website or using npm or yarn. I've downloaded the free version.
And then import the fontawesome.scss brands.scss at the top of my scss file. You may import regular.scss or solid.scss files if you want to show those type of icons.
SCSS Code:
#import "../../fontawesome-free-5.10.2-web/scss/fontawesome.scss";
#import "../../fontawesome-free-5.10.2-web/scss/brands.scss";
$socialMediaIcons: (facebook: $fa-var-facebook, twitter: $fa-var-twitter, linkedin: $fa-var-linkedin);
#each $key,
$value in $socialMediaIcons {
.#{$key} {
&:before {
#extend %fa-icon;
#extend .fab;
content: fa-content(#{$value});
}
}
}
And don't forget to add font-awesome CSS file at the head of your .html file.
<link rel="stylesheet" href="fontawesome-free-5.10.2-web/css/all.min.css">