使用bootstrap + font-awesome减少CSS"别名"

Question

我的网站使用bootstrap+ font-awesome,我正在尝试在我的site.less文件中创建一个"别名" :

.icon-domain { .icon-fire; }
.icon-group  { .icon-tags; }

我这样做的原因是因为我的网站上有一个"域"实体,我可能会在将来更改图标,所以我不想直接使用HTML中的"fire"图标.

在icon-group类的工作对我的代码,但icon-domain没有.从我所知道的,因为font-awesome实际上icon-group在其代码中有一个类.根据我的理解,lesscss我可以在另一个类中包含一个类,将它们组合成一个新类,但它根本就不能在这里工作.

如果我这样做,我可以让它工作site.less:

.icon-domain { &:before { content: "\f06d"; } }

但这并不理想,因为我必须自己定义内容并使用.icon-domain { .icon-fire; &:before; }语法错误.反正有没有使这项工作正常？

Answer 1

您需要包含足够的引导程序依赖项：

@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
@import "bootstrap/sprites.less";

.icon-domain { .icon-fire; }
.icon-group  { .icon-tags; }