css - Font Awesome 图标对齐

Question

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

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

但是，现在我遇到了图标略微不正常的问题。以前的字形是完美的。现在我看到:

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

Answer 1

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

我不使用 Rails，但我假设粗略的轮廓是:

1. checkout 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(不要忘记缩小!)。