Fontawomeome `fa-bars` меняют стиль: ширина, тонкость, расстояние

Question

Как уменьшить толщину fontawesome fa-bars и увеличить расстояние между вертикальными линиями и расширить горизонтальные линии?

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

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

Answer 1

Почему бы не попробовать что-то более настраиваемое, например:

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

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

Таким образом, вы можете редактировать толщину и в конечном итоге добавлять настройки, такие как анимация.

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