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

时间:2014-09-04 14:56:07

标签: less font-awesome font-awesome-4

我尝试使用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代码?有没有办法将一个类归入另一个具有较少的类?

谢谢!

1 个答案:

答案 0 :(得分:2)

我发现更好的解决方案是修改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,