如何从谷歌的Material Design图标外部移除间距？

Question

如何从谷歌的Material Design图标外部移除间距？

21

导语：我在尝试去除Google材料设计图标周围的空间时遇到了困难，并且似乎找不到任何解决方案，无论是在谷歌还是材料设计图标指南中。我不确定答案是否非常简单而我却忽略了它，或者是否有更深刻的原因导致我无法完成一个看似简单的任务。

下面您可以找到项目中相关代码的摘录，或者您也可以在此查看我的完整项目。

我的标记：

<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的“Reset CSS”，但据我所知，这不应影响Google的Material Design 图标。

更新（2018年3月24日01:33 UTC）： 看起来Google在图像文件本身中添加了图标周围的间距，使用户无法格式化该间距。如果有其他人遇到同样的问题，我建议您使用另一个图标字体，例如Font Awesome。

- Michael Burns

<h1>元素是内联显示的，@Laslos。<h1>元素和由<h1>元素创建的<i>之间没有空格；只有<i>元素本身才有。 - Michael Burns

我在你的CSS中没有找到 - 你的标记没有定义<h1>上的类，因此你为<h1>设置的内联display属性未被应用。 - Laslos

好的，那样更有意义。我不确定，但我猜测材料设计图标在图像文件中有间距。 - Laslos

是的，我想那可能是情况。那我只能忍受它，直到有人找到解决方案，或者也许是时候转换到 Font Awesome 了，哈哈。感谢您的时间，@Laslos。 - Michael Burns

我想知道图标文件中这种填充的原因是什么？我看到初级设计师犯过这样的错误，但既然谷歌这样做了，肯定有一些理由吧？ - Josh Noe

显示剩余2条评论

3个回答

1

我通过应用负边距来解决这个问题。它能够正常工作...但是Font Awesome解决这个问题的方式真的很棒，完全同意@Michael Burns的观点。

当应用负边距时，像素大小将取决于图标大小和具体的图标。但至少在不同浏览器中仍然保持一致。

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

- illnr

0

手动去除内边距并非可扩展的解决方案，因此我创建了一个工具来从套件中的所有图标中去除内边距。它需要您创建一个新的图标集，但可能会有所帮助：https://github.com/jgillick/IconsetCropper

- Jeremy Gillick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ahmad Dalao · Accepted Answer

我所做的是将icon用span包装，并给其固定的高度和宽度，然后我只需要隐藏overflow即可。这是在我的浏览器中的效果。

An example for removing the white space from the icon.

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<div class="print-element">
  Tag Number
  <span><i class="material-icons resize-circle">highlight_off</i></span>
</div>