图标栏汉堡不工作，只显示一条水平线答案

【问题标题】：Icon bar burger not working and displaying only one horizontal line图标栏汉堡不工作，只显示一条水平线
【发布时间】：2019-01-31 13:16:42
【问题描述】：

我正在尝试创建一个如下所示的响应式布局按钮：

但问题是我无法创建三个水平线，只能创建其中之一。保持这种状态：

我的代码：

HTML

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
</button>

CSS

.navbar-toggler {
  position: relative;
  float: right;
  width: 40px;
  height: 40px;
  margin-top: 5px;
  margin-right: 5px;
  cursor: pointer;
  z-index: 99999;
}

.navbar-toggler span {
  height: 4px;
  background: #545454;
  transition: 0.2s all;
}

.navbar-toggler span:before, .navbar-toggler span:after {
  content: "";
  display: block;
}

【问题讨论】：

你想要它只通过按钮吗？
也可以是其他方式，但必须显示三个水平线。
我已经更新了我的答案，请也看看

标签： html css bootstrap-4 navbar

【解决方案1】：

您可以使用 HTML unicode &#9776; 作为汉堡图标

您可以在这里找到更多信息：https://www.w3schools.com/charsets/ref_utf_symbols.asp

.navbar-toggle
{
font-size:25px; 
background:none; 
border:none;
}

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">&#9776;                 
</button>

您还可以为图标设置动画，请参阅：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js

【讨论】：

谢谢，它确实帮助了我，这正是我所需要的 :)