css - Rails 4 - Font-Awesome CSS 问题

Question

我有一个使用 font-awesome icons 的应用程序.

我面临的问题是一些图标的垂直对齐。更具体地说，未正确显示的图标是 this page 中的星形、齿轮和锁。 .

元素正确对齐的页面可以是 found here .

所以问题是我怎样才能在圆圈的中心对齐 Font Awesome 元素？

Answer 1

在您的 CSS 中，.fa 的行高被设置为 1。

由于您的 css 已缩小，我无法判断这是自定义 CSS 还是 Font Awesome CSS。

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

如果去掉line-height: 1;图标将居中。

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

如果您不想删除默认行高，您可以随时将行高添加到 .fa-3x 类:

.fa-3x {
  font-size: 3em;
  line-height: 1.9em;
}