字体很棒，内容 css 中有 sass

Question

我检查了几个主题我这个有点新，我发现了一个相似但不相同的案例。

所以，我的项目在 sass 和 font-awesome 下运行完美。

我正在导入超棒的 scss 文件：

//libs
@import "css/font-awesome/scss/font-awesome";

我的 sass class 我正在使用

&:hover { 
    font-family: FontAwesome;
    content: $fa-var-android;
}

我不想使用字体系列：FontAwesome；在每个 class 中，它是某种使用方法吗？

&:before {
    content: $fa-var-android;
}

或者更好：只有 unicode？

&:hover {
    content: '\f26e';
}

我试过了但是没有用，有人可以帮我吗？

谢谢。

Answer 1

这是一个使用通用 class 字体系列的解决方案。

HTML

<div class="a b">

</div>

CSS

.a{
  font-family: FontAwesome;
}
.b:before{
  content: '\f26e';
}
.b:hover:before{
  content: '\f2a3';
}

Answer 2

&:hover {
content: '\f26e';
}
&:before {
content: '\f003';
}
&:hover, &:before {
font-family: FontAwesome
}

所以你可以在逗号后添加你想要的所有类和伪类并一次性包含字体系列！

Answer 3

我会为此目的创建一个 mixin，在那个 mixin 中你包括了 FontAwesome family-font 和 content 变量：

$icon: 'bar';
$icon-2: 'baz';

@mixin fa($icon){
    font-family: FontAwesome;
    content: $icon;
}

.foo{
  @include fa($icon);

  &:before{
    @include fa($icon-2);
  }
}

并且输出：

.foo {
  font-family: FontAwesome;
  content: "bar";
}

.foo:before {
  font-family: FontAwesome;
  content: "baz";
}

Answer 4

感谢您的帮助，我同意上面的回答，但这些只适用于少数类而不是我的全部 css。明白了吗？

所以我找到了一个更好的方法来做到这一点：

body {
  font-family:  FontAwesome,Helvetica;
}

这样我就可以使用 unicode 和变量，我不需要在我的类中写字体系列。

&:before {
    content: $fa-var-android;
}


&:hover {
    content: '\f26e';
}

谢谢。

字体很棒，内容 css 中有 sass

font-awesome with sass in a content css

css

fonts

sass

font-awesome