仅使用 css 将 bootstrap 4 汉堡图标更改为三点菜单图标的最佳方法答案

【问题标题】：Best way to change bootstrap 4 hamburger icon to three dots menu icon using only css仅使用 css 将 bootstrap 4 汉堡图标更改为三点菜单图标的最佳方法
【发布时间】：2019-05-02 16:23:21
【问题描述】：

标准的 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 的三个点或烤肉串点菜单图标？

从此..

对此...（我欣赏颜色不同）

【问题讨论】：

使用字体真棒：<i class="fas fa-ellipsis-v"></i>fontawesome.com/icons/ellipsis-v?style=solid
更换背景图片：mdbootstrap.com/docs/jquery/navigation/hamburger-menu

标签： css bootstrap-4

【解决方案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>

【讨论】：