Fontawesome `fa-bars` 更改样式：宽度、细度、距离

Question

如何减少fontawesome的粗细fa-bars并增加垂直线之间的距离并延长水平线？

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

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

Answer 1

根据我的评论，看看这个 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>

Answer 2

为什么不试试更可定制的东西，比如：

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

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

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

Fontawesome `fa-bars` 更改样式：宽度、细度、距离

Fontawesome `fa-bars` change style: width, thin, distance

css

font-awesome

bootstrap-4