Как скомпилировать уникальный код Fontawesome с помощью scss в содержимом css

Я просто хотел добавить потрясающий уникальный код шрифта с парами ключ-значение, но когда я пытаюсь это сделать, он меняется

Бывший. содержание: ;

код 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
person Mohammad Faraz    schedule 13.09.2019    source источник
comment
Содержимое не отображается, только коробка на месте.   -  person lofihelsinki    schedule 13.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я решил проблему своими способами. Вот решение:

  1. Сначала загрузите набор инструментов для шрифтов с их веб-сайта или с помощью npm или yarn. Я скачал бесплатную версию.
  2. А затем импортируйте fontawesome.scss brands.scss вверху моего файла scss. Вы можете импортировать файлы regular.scss или solid.scss, если хотите отображать значки такого типа.
  3. Код СКСС:
@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. И не забудьте добавить CSS-файл с потрясающим шрифтом в начало файла .html.
<link rel="stylesheet" href="fontawesome-free-5.10.2-web/css/all.min.css">
person Fatema T. Zuhora    schedule 13.09.2019