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个”版本“。一个用于轻型导航栏，另一个用于暗色..”< / p>

// 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");
 }

Bootstrap 4.0自定义汉堡包图标

1 个答案: