样式化材料图标字体。使字体/图标边框弯曲答案

【问题标题】：Styling the material icon font. Making the font/icon borders curvy样式化材料图标字体。使字体/图标边框弯曲
【发布时间】：2016-10-26 19:51:57
【问题描述】：

我在开发网站 UI 时使用了后退箭头图标。谁不喜欢曲线？我想要做的是使图标边框弯曲。并减少图标重量。使它变薄。可能很苗条。我使用了字体粗细属性。它没有被应用。

我现在拥有的： --code sn-p 在那里--

我需要完成的工作：

由于用户体验很重要，因此我无法通过谷歌搜索找到答案。

.nav-left-model {
  display: block;
  float: left;
  margin-left: 10px;
}
.nav-left-model .arrow-back-icon {
  float: left;
  padding-top: 9px;
  padding-bottom: 7px;
  padding-left: 12px;
  background-color: #f8faf9;
  width: 45px;
  margin-top: 8px;
  border-radius: 50%;
  font-weight: lighter;
  box-shadow: 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.05);
  margin-right: 0px;
  cursor: pointer;
}
.nav-left-model .arrow-back-icon:hover {
  box-shadow: 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.2);
}
.nav-left-model .arrow-back-icon .arrow-back-icon-element {
  color: #3fce76;
  font-size: 2.5em;
}
.nav-left-model .team-name {
  float: left;
  padding-left: 15px;
  padding-top: 8px;
}
.nav-left-model .team-name .team-name-element {
  font-weight: 300;
  font-size: 34px;
  color: #1f1f1f;
}
.nav-left-model .settings-icon {
  float: left;
  padding-left: 15px;
  padding-top: 25px;
}
.nav-left-model .settings-icon .settings-icon-element {
  color: #cccccc;
  cursor: pointer;
}
.nav-left-model .settings-icon .settings-icon-element:hover {
  color: #b3b3b3;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css" rel="stylesheet"/>
<div class="nav-left-model">
  <div class="arrow-back-icon"><i class="zmdi zmdi-arrow-left arrow-back-icon-element"></i>
  </div>
</div>

【问题讨论】：

字体不可能。对于使用stroke 绘制的svg 图像，您将使用stroke-linecap: round。除此之外，用你拥有的资源是不可能实现的。
哦，我的错。无论如何，感谢您的回复。要实现这一点，除了更改图标没有任何解决方案 - 正如你所说的不可能？ @senthe
用-webkit-text-stroke查看我的回答，如果您出于任何原因不想切换到svg，这似乎是最好的选择。
是的。太棒了。也许 moz-text-stroke 应该在 firefox 中工作，不，不？
首先，如果有的话，这将是相同的属性以相同的方式工作，其次它不是有效的属性，因为 Mozilla 目前也使用 Webkit 和 -webkit-text-stroke。 developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

标签： html css fonts icons google-material-icons

【解决方案1】：

最接近您尝试获得的可能是-webkit-text-stroke？

请注意，并非所有浏览器都支持它。 http://caniuse.com/#search=text-stroke

.nav-left-model {
  display: block;
  float: left;
  margin-left: 10px;
}
.nav-left-model .arrow-back-icon {
  float: left;
  padding-top: 9px;
  padding-bottom: 7px;
  padding-left: 12px;
  background-color: #f8faf9;
  width: 45px;
  margin-top: 8px;
  border-radius: 50%;
  font-weight: lighter;
  box-shadow: 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.05);
  margin-right: 0px;
  cursor: pointer;
  -webkit-text-stroke: 1px white;
}
.nav-left-model .arrow-back-icon:hover {
  box-shadow: 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.2);
}
.nav-left-model .arrow-back-icon .arrow-back-icon-element {
  color: #3fce76;
  font-size: 2.5em;
}
.nav-left-model .team-name {
  float: left;
  padding-left: 15px;
  padding-top: 8px;
}
.nav-left-model .team-name .team-name-element {
  font-weight: 300;
  font-size: 34px;
  color: #1f1f1f;
}
.nav-left-model .settings-icon {
  float: left;
  padding-left: 15px;
  padding-top: 25px;
}
.nav-left-model .settings-icon .settings-icon-element {
  color: #cccccc;
  cursor: pointer;
}
.nav-left-model .settings-icon .settings-icon-element:hover {
  color: #b3b3b3;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css" rel="stylesheet"/>
<div class="nav-left-model">
  <div class="arrow-back-icon"><i class="zmdi zmdi-arrow-left arrow-back-icon-element"></i>
  </div>
</div>

【讨论】：