使用Font-awesome和LESS应用语义原则？

Question

我尝试使用Font-awesome，就像我使用Bootstrap一样，根据网页设计的语义原则（不在我的HTML标签中放入数十亿个非语义类），使用LESS。

似乎这是不可能的：图标定义是这样的：

.@{fa-css-prefix}-home:before { content: @fa-var-home; }

这不是mixin定义，而是使用LESS变量构建的经典CSS规则。

所以，我无法做出这种声明：

.meaning-class-name {
    .fa-home;
}

Lessc抱怨.fa-home未定义。

是否可以避免破坏我的HTML代码？有没有办法将一个类归入另一个具有较少的类？

谢谢！

Answer 1

我发现更好的解决方案是修改font-awesome/less/icons.less并根据这种模式重写声明：

.@{fa-css-prefix}-home { &:before { content: @fa-var-home; } }

它类似于Bootstrap使用的glyphicons.less。

PS：在Eclipse中，可以使用find / replace工具快速完成此操作：

查找：

\.@\{fa-css-prefix\}-([-0-9a-zA-Z]+):before \{ content: @([-0-9a-zA-Z]+); \}

替换：

.@{fa-css-prefix}-$1 { &:before { content: @$2; } }

和

查找：

\.@\{fa-css-prefix\}-([-0-9a-zA-Z]+):before,

替换：

.@{fa-css-prefix}-$1,