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

Posted 2023-02-22

【中文标题】如何协调 Font-Awesome 和 Material Design 图标字体？

【英文标题】：How to reconcile Font-Awesome and Material Design icon fonts?

【发布时间】：2015-10-05 00:30:47

【问题描述】：

有没有人有一个好的样式表 sn-p 可以让 FontAwesome 和 Material-Design icon font 在空间上很好地协同工作 - 让 Material-Design 图标在一个主要是 FontAwesome 的网站上表现得很好？样式、基线、宽度是不同的——也许更多。库存的“material-icons” CSS 类将字体大小固定为 24 像素。此外，Material-Design 图标的有效基线远高于文本基线。

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

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

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

【问题讨论】：

我认为这个问题主要是基于意见的，因为它目前是写的。您或多或少会问“我怎样才能使这些图标看起来不错？”。我建议您编辑您的问题以提出更客观可回答的问题，例如“我如何修改材料图标集以具有与 fontawesome 相同的基线？”如果可能，请提供一些图片。否则，这个问题可能会被关闭。

从设计的角度来看，它们在一起看起来不好看是有原因的。 material design icons are designed using a very strict set of rules，而 fontawesome 的设计决策在许多情况下直接与规范的材料设计指南相冲突。

@WoodrowBarlow - 我摆脱了抱怨并坚持事实。我试图故意让这个问题比询问“我用什么 CSS 标签来做 x？”更广泛。 - 无需浪费读者时间！

在更多人投票关闭此“主要基于意见”之前，您可能会考虑某人的上下文，该人的应用程序已经设计有 FontAwesome 图标，并且只想填补一些空白或替换一些基于字体的 PNG 图标，它们不在 FontAwesome 中。这不是关于哪种字体更好的意见 - 这只是简单的实用主义。

【参考方案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';

【参考方案2】：

更好的使用

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

当你使用大于 1 的 line-height 时，转换会产生问题

【参考方案3】：

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

无论我尝试什么，我都无法使用 CSS 解决此问题 - 每个建议一开始都有效，但在使用不同的字体大小等时失败了。

我与 CSS 最接近的是：

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

最后，我使用字体锻造来编辑实际的字体基线，现在它可以工作了。

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

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

我可以的

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

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