如何从谷歌的材料设计图标外观中删除间距？

Posted 2023-02-22

【中文标题】如何从谷歌的材料设计图标外观中删除间距？

【英文标题】：How to remove Spacing from google's Material Design Icons Exterior?

【发布时间】：2018-09-01 05:42:42

【问题描述】：

头注：我在删除 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。

【问题讨论】：

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

我在您的 CSS 中错过了这一点 - 您的标记没有定义 <h1> 上的类，因此您的 <h1> 的内联显示属性未应用。

啊，抱歉。谢谢，@Laslos。我现在补充一下。

好吧，这更有意义。我不确定，我猜材料设计图标在图像文件中有间距。

是的，我认为可能是这样。我只能忍受它，直到有人找到解决方案，或者也许是时候切换到 Font Awesome，哈哈。感谢您的宝贵时间，@Laslos。

【参考方案1】：

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

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

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

【参考方案2】：

我所做的是用span 包裹icon 并修复hight 和width 然后我所要做的就是隐藏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;

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