Bootstrap 4.0自定义汉堡图标[重复]

Question

我正在尝试改变三行的颜色和图标周围的边框

通过css但不确定调用哪些标签来修改它。

CSS：

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler-icon{
  border-color: white;
}
/* change the background color */
.navbar-custom {
    background-color: red;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: yellow;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: black;
}

HTML：

 <nav class="navbar navbar-expand-md navbar-custom">
      <a class="navbar-brand" href="#"><img src="img/logo.png" class="img-fluid"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse"    data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
</nav>

Answer 1

此答案之前已在此处发布： Bootstrap 4 Change Hamburger Toggler Color

来自其他作者：

“Bootstrap 4 中的 navbar-toggler-icon（汉堡包）使用 SVG 背景图像。切换器图标图像有 2 个“版本”。一个用于浅色导航栏，一个用于深色导航栏..“

// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
   background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-inverse .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;..");
}

"所以如果你想把这张图片的颜色改成别的颜色，你可以自定义图标。比如这里我把RGB值设置为粉色(255,102,203)。注意stroke='rgba(255,102,203, 0.5 )' SVG 数据中的值："

.custom-toggler .navbar-toggler-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
 }