少:在以前使用font-awesome:之前

Question

我想要一个带有自定义字体,颜色和左侧子弹的标题的CSS选择器.所以我希望我的标题使用我的自定义字体,并且:before使用font-awesome 是伪元素.所以我希望我:before有这个.fa类,而整个元素没有这个类.

我有这个HTML:<h1 class="bulleted-header">Hello</h1>我想在LESS写这样的东西:

.bulleted-header {
    color: #61cbe6;
    font: 16px 'ds_goose', sans-serif;
    &:before {
        content: @fa-var-bullseye; // font-awesome's bullet icon
        .fa; // calling font-awesome's class. DOESN'T COMPILE
    }
}

问题是.fa类在font-awesome LESS源中声明如下:.@{fa-css-prefix} { ... }所以上面的代码不能编译.我试图重用这样的.fa代码:

&:before {
    content: @fa-var-bullseye; // font-awesome's bullet icon
    .@{fa-css-prefix}; // DOESN'T COMPILE
}

和这样:

&:before:extend(.@{fa-css-prefix}) { // compiles but no effect
    content: @fa-var-bullseye; // font-awesome's bullet icon
}

我知道我可以像这样改变我的html <h1 class="bulleted-header"><span class = "fa fa-bullseye"></span>Hello</h1>并且根本不使用:before,但是在CSS中保留所有这些子弹更合乎逻辑.

我最后只是将内容复制粘贴.fa到我的内容中:before,但这种方法有问题,因为现在我必须自己维护这些代码以防万一FA人改变了一些东西.还有更优雅的解决方案吗？

Answer 1

你不能真正在Less ...中使用插值选择器用于mixin,因此带插值选择器的规则不能包含在其他规则集中.在这里看到答案:

LESS mixin一个变量类名

但是在你的情况下你可以将编译后的css导入为less而不是更少的文件,如果你没有用这些较少的文件做任何其他特殊的东西.只需使用:

@import (less) 'font-awesome.css';

然后你可以.fa像你想要的那样使用mixin.

但是,这种方式你不会导入你可以单独执行的字符变量,而是你也可以直接使用content: "\f140";它(它的使用方式.fa-bullseye:before)

或者只是扩展从选择器导入font-awesome.css的选择器,如下所示:

.bulleted-header {
    color: #61cbe6;
    font: 16px 'ds_goose', sans-serif;
    &:extend(.fa, .fa-bullseye all);
}

希望这可以帮助.

更新:

从LESS> = 1.6开始,内插选择器的规则可以作为mixins访问.因此,调用.famixin就像在上面的示例中一样,现在应该可以正常工作.

Answer 2

我在使用 SASS 实现时遇到了同样的问题。我更改了.@{fa-css-prefix}代码，所以它确实如此.@{fa-css-prefix}:before，这对我来说效果很好。那么你仍然需要扩展你的基本元素，但是 font-style 仅应用于 :before

我其实很想知道他们为什么这么做。我认为他们的方法是，每个图标都有单个 dom 元素（就像他们<i>使用的那样），并且按钮、链接、列表项或您通常所做的任何内容前面没有图标。但据我记得，上一个 fontawesome 版本就是这种情况。