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

Posted 2023-03-06

【中文标题】Bootstrap 4.0自定义汉堡图标[重复]

【英文标题】：Bootstrap 4.0 customize hamburger icon [duplicate]

【发布时间】：2018-07-26 23:37:49

【问题描述】：

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

通过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>

【问题讨论】：

回复：下面的2个答案，他们似乎有found the dup，然后简单地粘贴并重新格式化现有的代码/答案。 ***.com/help/referencing

【参考方案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");
 

【讨论】：

看来你只是复制/粘贴我的answer from the duplicate，然后在顶部更改了几个字。

@ZimSystem 已确认。

愚蠢的。曾经是你可以覆盖CSS。现在你必须使用 SVG 来获得一个三行图标？严重地？只是一个半径和三个粗线的边界。 Bootstrap 已经出轨了。应该在 3 点停止，IMO。不过，还不如 font-awesome 糟糕。