如何协调字体-令人敬畏的和材料设计图标字体？

Question

有没有人有一个很好的样式表片段，可以让FontAwesome和Material-Design icon font在空间上很好地协同工作-让材质设计图标在一个以FontAwesome为主的站点上播放得很好？样式，基线，宽度是不同的-也许更多。常用的"material-icons“CSS类将字体大小固定为24px。此外，Material-Design图标的有效基线远远高于文本基线。

到目前为止，我已经用以下命令修补了Google的"material-icons“CSS类：

{
    font-size: 150%;
    transform: translate(-10%,20%);
}

Material-Design图标也比Font-Awesome set更宽--我还没有决定如何解决这个问题。我没有用过太多的图标--我没有尝试过的图标可能有更多的问题。

Answer 1

我使用以下代码在导航栏，按钮，井，手风琴，表单和其他一些地方使用，改变它以满足您的需要(您可能希望它更大或更厚)。

.material-icons {
  font: normal normal normal 16px/1 'Material Icons';
  display: inline-block;
  transform: translateY(10%);
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

​

​

Answer 2

更好地使用

font-size: 115%;
vertical-align: text-bottom;

当使用大于1的行高时，转换会产生问题

Answer 3

我有完全相同的问题，这两种字体只是不能很好地玩在一起！

不管我怎么尝试，我都不能用CSS解决这个问题--每个建议一开始都有效，但当我使用不同的字体大小时，这些建议就失效了。

我最接近的CSS是这样的：

.material-icons:before {
  position: relative;
  top: 0.135em;
}

最后，我使用font forge编辑了实际的字体基线，现在它非常有用。

我还将字体重新映射到与font Awesome相同的结构中，而不是：

<i class="material-icons">alarm_on</i>

我能做到

<i class="md md-fw md-alarm-on"></i>

我不知道字体的用途和个人喜好，但我更喜欢这种使用图标字体的方式！