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