如何协调 Font-Awesome 和 Material Design 图标字体？

Question

有没有人有一个很好的样式表片段，可以让FontAwesome和Material-Design 图标字体在空间上很好地协同工作——让 Material-Design 图标在一个主要是 FontAwesome 的站点中很好地发挥作用？样式、基线、宽度不同 - 可能更多。库存的“material-icons”CSS 类将字体大小固定为 24px。此外，Material-Design 图标的有效基线远高于文本基线。

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

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

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

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