字体很棒,内容 css 中有 sass
font-awesome with sass in a content css
我检查了几个主题我这个有点新,我发现了一个相似但不相同的案例。
所以,我的项目在 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';
}
我试过了但是没有用,有人可以帮我吗?
谢谢。
这是一个使用通用 class 字体系列的解决方案。
HTML
<div class="a b">
</div>
CSS
.a{
font-family: FontAwesome;
}
.b:before{
content: '\f26e';
}
.b:hover:before{
content: '\f2a3';
}
&:hover {
content: '\f26e';
}
&:before {
content: '\f003';
}
&:hover, &:before {
font-family: FontAwesome
}
所以你可以在逗号后添加你想要的所有 类 和伪 类 并一次性包含字体系列!
我会为此目的创建一个 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";
}
感谢您的帮助,我同意上面的回答,但这些只适用于少数 类 而不是我的全部 css。明白了吗?
所以我找到了一个更好的方法来做到这一点:
body {
font-family: FontAwesome,Helvetica;
}
这样我就可以使用 unicode 和变量,我不需要在我的 类 中写字体系列。
&:before {
content: $fa-var-android;
}
&:hover {
content: '\f26e';
}
谢谢。
我检查了几个主题我这个有点新,我发现了一个相似但不相同的案例。
所以,我的项目在 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';
}
我试过了但是没有用,有人可以帮我吗?
谢谢。
这是一个使用通用 class 字体系列的解决方案。
HTML
<div class="a b">
</div>
CSS
.a{
font-family: FontAwesome;
}
.b:before{
content: '\f26e';
}
.b:hover:before{
content: '\f2a3';
}
&:hover {
content: '\f26e';
}
&:before {
content: '\f003';
}
&:hover, &:before {
font-family: FontAwesome
}
所以你可以在逗号后添加你想要的所有 类 和伪 类 并一次性包含字体系列!
我会为此目的创建一个 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";
}
感谢您的帮助,我同意上面的回答,但这些只适用于少数 类 而不是我的全部 css。明白了吗?
所以我找到了一个更好的方法来做到这一点:
body {
font-family: FontAwesome,Helvetica;
}
这样我就可以使用 unicode 和变量,我不需要在我的 类 中写字体系列。
&:before {
content: $fa-var-android;
}
&:hover {
content: '\f26e';
}
谢谢。