html - 如何从Google的Material Design图标外部删除间距？

Question

标题:我在删除Google's Material Design icons周围的间距时遇到问题，似乎无法在Google或the Material Design icons guide上找到任何解决方案。我不确定答案是否很简单，是否会遗漏，或者是否有更深刻的原因说明为什么我无法完成看似简单的任务。

在下面，您可以找到我元素中相关代码的摘录，或者，可以选择view my full project here。

我的标记，

<header class="primary-header first-header-column">
  <i class="material-icons primary-header-material-icon-first-menu">
    menu
  </i>
  <h1>
    <strong>
      Neocrypt
    </strong> 
    Network
  </h1>
  <nav class="primary-header-navigation">

  </nav>
</header>

图标样式，

.material-icons.primary-header-material-icon-first-menu {
  color: var(--primary-typeface-color);
  font-size: 48px;
}

标题样式，以及

.primary-header h1 {
  text-align: center;
  color: var(--primary-typeface-color);
  display: inline;
  font-family: var(--primary-typeface);
  font-size: 60px;
  line-height: 150px;
}

引用的变量(不相关)。

:root {
  --primary-typeface-color: #ffffff;
  --primary-typeface: 'Lato', sans-serif;
}

我希望图标直接出现在标题旁边，而图标周围没有填充，这样我自己就可以在元素周围添加间距，就像重置一样!我尝试使用padding: 0px;，以及其他一些解决方案来尝试解决该问题，但是，这毫无用处。

脚注:我正在使用Eric Meyer's "Reset CSS"，但是据我所知，这不会对Google的Material Design图标产生影响。

更新(24/03/2018 01:33 UTC):看来Google似乎在图像文件本身中的图标周围添加了间距，用户没有选择格式化该间距的方法。如果其他人也遇到同样的问题，我建议您使用其他图标字体，例如Font Awesome。

Answer 1

我通过应用负边距解决了这个问题。它可以工作...但是Font Awesome解决这个问题的方法很棒，完全同意@Michael Burns。

当应用负边距时，px将取决于图标的大小和特定的图标。但是至少在不同的浏览器中它仍然保持一致。

.material-icons.primary-header-material-icon-first-menu {
  margin-left: -2px;
}