时间戳

首页 > 解决方案 > 如何在 css 内容中使用 scss 编译 Fontawesome 唯一代码

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

问题描述

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

前任。内容：；

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

标签： csssassfont-awesome-5

解决方案

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

  1. npm首先，从他们的网站或使用or下载 font-awesome 工具包yarn。我已经下载了免费版。
  2. 然后在我的文件fontawesome.scss brands.scss顶部导入。如果您想显示这些类型的图标，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. 并且不要忘记在文件的开头添加 font-awesome CSS.html文件。
<link rel="stylesheet" href="fontawesome-free-5.10.2-web/css/all.min.css">

推荐阅读