css - 字体真棒图标对齐

Question

我正在使用 bootstrap-sass 和 font-awesome-sass-rails gems，并通过添加到 bootstrap-and-overrides.css.scss 成功地消除了重复的图标（来自 glyphicons）：

[class^="icon-"] {
  background-image:none;
}

但是，现在我遇到了图标有点不合时宜的问题。以前的字形图标很完美。现在我看到：

我想将图标向下移动一个像素或 2 个像素。请帮忙。谢谢。

Answer 1

类似于在Font-Awesome Integration 部分中找到的 LESS 说明，应该完全删除字形图标的 SASS，而不是仅仅在其上加载 Font-Awesome SASS。我强烈反对任何仅仅试图通过覆盖原本不需要的 CSS 规则来保存外观的方法。

我不使用 Rails，但我认为粗略的轮廓是：

1. 签出bootstrap-sass repo的副本。

2. 找到_bootstrap.scss文件。

3. 替换为@import "bootstrap/sprites";，@import "your/path/to/font-awesome";其中your/path/to/包含font-awesome.scss。

4. 重新编译bootstrap.scss（不要忘记缩小！）。

Answer 2

我正在使用 twitter-bootstrap-rails gem。我不得不注释掉：

  @iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings.png");

来自 bootstrap_and_overrides.css.less 文件