Fontawesome `fa-bars` 改变风格：宽度、细度、距离答案

【问题标题】：Fontawesome `fa-bars` change style: width, thin, distanceFontawesome `fa-bars` 改变风格：宽度、细度、距离
【发布时间】：2019-10-18 02:28:00
【问题描述】：

如何减少fontawesomefa-bars的粗细，增加竖线间距，延长横线？

 <i className="fa fa-bars" aria-hidden="true"></i>

.fa {
  margin: 40px;
  font-size: 14px;
}

【问题讨论】：

Font Awesome 图标实际上是 Unicode 字符，因此您可以通过修改元素的文本属性来影响主要的“绘图”。在您的情况下，font-weight: light;。另外，我不认为您希望通过将其分配给 .fa 类或通过将其分配给 .fa-bars 类的每个 bars 字符来将此更改应用于每个 Font Awesome 字符。给这个元素添加一个 id，然后将它分配给 id #bars，例如。
您需要购买专业版的 Font Awesome 才能实现您想要的效果。如您所见here，更细的条仅在专业版上可用。
@LucasArbex 是的，由于“绘图”是一个单独的独立字符，您可以影响其文本属性，如颜色、重量、大小等，但不能影响“绘图”本身

标签： css bootstrap-4 font-awesome

【解决方案1】：

为什么不尝试一些更可定制的东西，例如：

.bars div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

<div class="bars">
  <div></div>
  <div></div>
  <div></div>
</div>

通过这种方式，您可以编辑厚度并最终添加动画等自定义设置。

【讨论】：

【解决方案2】：

根据我的评论，看看这个JSFiddle。

#bars {
  color: black;
  font-weight: lighter;
  font-size: 14px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i id="bars" class="fa fa-bars" aria-hidden="true"></i>

【讨论】：