Rails 4-字体-可怕的CSS问题

Question

我有一个使用字体-令人敬畏的图标的应用程序。

我面临的问题是一些图标的垂直对齐。更具体地说，没有正确显示的图标是此页中的星星、齿轮和锁。

元素对齐的页面可以是在这里发现的。

所以问题是我如何在圆圈的中心对齐字体-令人敬畏的元素？

Answer 1

在你的CSS中，.fa的直线高度被设置为1。

由于您的CSS是小型化的，我无法判断这是自定义css还是字体Awesome。

.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;
}

如果您移除线高: 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;
}