字体Awesome图标对齐 [英] Font Awesome icons alignment

问题描述

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

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

但是，现在我有一个稍微出线图标的问题。字形是完美的。现在我看到了：

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

解决方案

类似于 Font-Awesome Integration部分，应该删除字形图标的SASS，而不是仅仅加载Font-Awesome SASS。我强烈反对任何只尝试通过覆盖首先不需要的CSS规则来保存外观的方法。

我不使用Rails，但我假设粗略大纲是：

1. 检查




2. 找到 _bootstrap。

   文件



3. 将 @importbootstrap / sprites code> @importyour / path / to / font-awesome; ，其中 strong> font-awesome.scss 。



4. 重新编译 bootstrap.scss ）。




I am using bootstrap-sass and font-awesome-sass-rails gems and have successfully eradicated duplicate icons (from glyphicons) by adding to bootstrap-and-overrides.css.scss:

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

However, now I am having the problem of slightly out of line icons.. The glyphicons were perfect before. Now I am seeing:

I would like to move the icons down a pixel or 2. Please help. Thanks.

解决方案

Similar to the directions for LESS found on the Font-Awesome Integration section, one should remove the SASS for the glyph icons altogether, rather than just load the Font-Awesome SASS on top of it. I strongly discourage any approach that merely tries to save appearances by overriding CSS rules that don't need to be there in the first place.

I don't use Rails, but I assume the rough outline would be:

1. Checkout a copy of the bootstrap-sass repo.

2. Locate the _bootstrap.scss file.

3. Replace the @import "bootstrap/sprites"; with @import "your/path/to/font-awesome";, where your/path/to/ contains the font-awesome.scss.

4. Recompile the bootstrap.scss (don't forget to minify!).

这篇关于字体Awesome图标对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！