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

Question

有没有人有制作 FontAwesome 的好的样式表片段？和 Material-Design icon font在空间上很好地协同工作——让 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

我将以下代码用于导航栏、按钮、井、 Accordion 、表单和其他一些地方，根据您的需要更改它(您可能希望它更大或更厚)

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