1

背景

  • 我正在使用带有LessJS的Twitter Bootstrap LESS 源
  • 我正在使用font-awesome .less （从 Bootstrap.less 中引用）
  • 我已经从引导程序中删除了图标部分，因此它们不会发生冲突。
  • 我有一个 site.less 文件，我也从 Bootstrap 中引用它，其中包含一些特定于站点的样式。

目标

我希望能够在我的 site.css 文件中执行以下操作：

.feedbackItemIconPraise
{
    .icon-thumbs-up; //class included in font-awesome.less
    color:Green;
}

问题

当我尝试上述方法时，出现以下错误：

在此处输入图像描述

这个错误是有道理的；我只是不确定如何最好地纠正它而不在我的 site.less 中创建额外的 font-awesome.less 导入（我想这将是它自己的问题）。

澄清一下：根据下面的评论：我有一个从 Knockout 视图模型中使用的类名。（例如，如果选择“Praise”，它将应用“FeedbackItemPraise”类）。如果选择了 FeedbackItemPraise，我希望它应用 font-awesome 中的 .icon-thumbs-up 类（通过网络字体显示图标），然后将颜色设为绿色。

到目前为止我所拥有的

Bootstrap.less 定制（仅显示相关部分）：

//Sean's customizations
@import "background.less"; // Background images and colors 
@import "font-awesome.less"; // Font Awesome font (SK 2012/09/04)
@import "site.less"; // site-specific LESS

site.less 中的类：

.feedbackItemIconPraise
{
    .icon-thumbs-up; //class included in font-awesome.less
    color:Green;
}
4

2 回答 2

2

更新

再次查看 Font-Awesome 时，看起来他们现在已经为图标包含了 mixin。请参阅以下两个文件。

https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less

https://github.com/FortAwesome/Font-Awesome/blob/master/less/mixins.less

像这样使用：

.feedbackItemIconPraise
{
    .icon(@thumbs-up-alt)
    color:Green;
}

原来的

如果您查看 font-awesome.less ，您会发现该类不存在，它实际上是.icon-thumbs-up:before. 不幸的是，您不能将伪类用作混合，例如.icon-thumbs-up:before;.

你需要修改你的 font-awesome.less 文件（或者只是添加这个类，或者content: "\f087";直接放在它需要去的地方）所以有一个非:before版本：

.icon-thumbs-up:before            { content: "\f087"; }
.icon-thumbs-up                   { content: "\f087"; }

然后应用这个概念：

.feedbackItemIconPraise {
    font-family: "FontAwesome";
    font-size: 90px;
    padding-top: 7px;

    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;

    &:before {
        .icon-thumbs-up;
    }

}

似乎 Font-Awesome 图标必须使用:before伪才能显示。

演示： http: //pulse-dev.com/files/stackoverflow/fontawesomeclass/

于 2012-09-13T17:07:25.707 回答
1

可能有另一种解决方案，但我在通过 LESS 编译器运行它之前将我的脚本（自动）合并到一个文件中。这允许我预先定义可以在我的任何 LESS 文件中使用的变量和混合。

在线文档确实提到 LESS 可以包含文件，从而使@import变量和 mixin 可用。您可能需要确保您使用的是最新版本的编译器，并且如果导入文件以文件夹结构组织，您可能需要告诉编译器在哪里搜索。

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'style.less' // Specify a filename, for better error messages
});
于 2012-09-13T13:13:39.670 回答