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

【问题标题】：How to compile Fontawesome unique code with scss in css content如何在 css 内容中使用 scss 编译 Fontawesome 唯一代码
【发布时间】：2019-09-13 05:21:50
【问题描述】：

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

例如。内容：;

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: ;
}

【问题讨论】：

内容不显示，只有一个框。

标签： css sass font-awesome-5

【解决方案1】：

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

首先，从他们的网站或使用npm 或yarn 下载font-awesome 工具包。我已经下载了免费版。
然后在我的scss 文件顶部导入fontawesome.scss brands.scss。如果您想显示这些类型的图标，您可以导入 regular.scss 或 solid.scss 文件。
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});
        }
    }
}

别忘了在 .html 文件的开头添加 font-awesome CSS 文件。

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

【讨论】：