如何调和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集合更宽——我还没有决定如何解决这个问题。我并没有使用过很多图标——可能还有我没有尝试的问题。

- Ed Staub

---

我认为这个问题目前主要是基于个人意见的。你更多地是在问“我怎样才能让这些图标看起来漂亮？”。我建议你编辑你的问题，提出一些客观可回答的问题，比如“我怎样修改材料图标集，使其与FontAwesome具有相同的基线？”如果可能的话，请提供一些图片。否则，这个问题很可能会被关闭。 - Woodrow Barlow

从设计角度来看，它们不搭配在一起的原因是有道理的。Material Design Icons使用非常严格的规则进行设计，而FontAwesome的设计决策在许多情况下直接与规范的Material Design指南相冲突。 - Woodrow Barlow

@WoodrowBarlow - 我摒弃了抱怨，坚持事实。我试图保持问题故意比“我用什么CSS标记实现x？”更广泛——没有必要浪费SO读者的时间！ - Ed Staub

在更多的人投票将此关闭为“主观性强”的之前，你可能要考虑一个已经设计有FontAwesome图标的应用程序的背景，并且只想填补一些空白或用不在FontAwesome中的基于字体的图标替换一些PNG图标。这不是关于哪种字体更好的观点 - 这只是简单实用主义。 - Ed Staub

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

- Saravanabalagi Ramachandran

Answer 2

更好的使用方式

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

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

- Andreas

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>

虽然这不是字体的预期使用方式，而且只是个人喜好，但我更喜欢这种使用图标字体的方式！

- Joewsh