css - 如何在css内容中用scss编译Fontawesome唯一代码

Question

我只是想添加带有键值对的字体很棒的唯一代码，但是当我尝试这样做时它正在改变

例。内容:;

SCSS代码

$socialMediaIcons: (facebook: '\f09a', twitter: '\f099', linkedin: '\f0e1');

@each $key,
$value in $socialMediaIcons {
    .#{$key} {

        &::before {
            font-family: fontAwesome;
            content: #{$value};
        }

    }
}

CSS编译代码

.facebook::before {
  font-family: fontAwesome;
  content: ;
}

.twitter::before {
  font-family: fontAwesome;
  content: ;
}

.linkedin::before {
  font-family: fontAwesome;
  content: ;
}

Answer 1

我已经用我的方式解决了这个问题。这是解决方案:

1. 首先，从他们的网站或使用 npm 或 yarn 下载 font-awesome 工具包。我已经下载了免费版本。
2. 然后在我的 scss 文件的顶部导入 fontawesome.scss brands.scss。如果您想显示这些类型的图标，您可以导入 regular.scss 或 solid.scss 文件。
3. SCSS 代码:

@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});
        }
    }
}

1. 并且不要忘记在 .html 文件的头部添加超棒的 CSS 文件。

<link rel="stylesheet" href="fontawesome-free-5.10.2-web/css/all.min.css">