仅使用CSS将Bootstrap 4汉堡包图标更改为三个点菜单图标的最佳方法

Question

标准的bootstrap 4导航栏按钮带有一个汉堡包图标。

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

如何将其从原始的汉堡包图标更改为仅css的三个点或烤肉串点菜单图标？

从这里..

为此...（我很欣赏颜色是不同的）

Answer 1

body {
  background:#262626;
}

input {
  visibility:hidden;
}

.menu_container {
  padding:10px;
  border:1px solid #a0a0a0;
  width:30px;
  height:30px;
  position:relative;
  border-radius:4px;
}

.line1,
.line2,
.line3 {
  width:calc(100% - 20px);
  height:3px;
  border-radius:2px;
  background:#a0a0a0;
  position:absolute;
  top:50%;
  transform:translateY(-50%)
}

.line2 {
  transform:translateY(calc(-50% + 10px));
}

.line3 {
  transform:translateY(calc(-50% - 10px));
}

.dot_menu {
  background:#e0e0e0;
  position:relative;
  height:50px;
  border:1px solid #e0e0e0;
  width:20px;
  margin:0;
  display:none;
}

input:checked + .menu_container{
  display:none;
}


input:checked + div + div {
  display:block;
}

.dot1,
.dot2,
.dot3 {
  height:9px;
  width:9px;
  background:#262626;
  border-radius:2px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

.dot2 {
  transform:translateY(calc(-50% + 13px)) translateX(-50%);
}

.dot3 {
  transform:translateY(calc(-50% - 13px)) translateX(-50%);
}

<label>
  <input type="checkbox">
<div class="menu_container">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>
<div class="dot_menu">
  <div class="dot1"></div>
  <div class="dot2"></div>
  <div class="dot3"></div>
</div>
</label>