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

Answer 2

我所做的就是用icon包裹span并给它修复hight和width，然后我要做的就是隐藏{{1 }}。

这就是我浏览器中的外观。

从图标中删除空白的示例。

overflow

.print-element {
  min-width: 175px;
  min-height: 45px;
  border: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  margin-right: 25px 25px 15px 0px;
  cursor: move;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 10px 50px 10px 10px;
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.resize-circle {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: .1px solid white;
  color: #aaa;
  cursor: pointer;
}

span {
  width: 20px;
  height: 20px;
  background: white;
  position: absolute;
  top: -7px;
  border-radius: 50%;
  right: -7px;
  overflow: hidden;
}

如何从Google的Material Design Icons Exterior中删除间距？

2 个答案: