如何更改 Bootstrap 4 导航栏按钮图标颜色？

Question

我有一个 Bootstrap 网站，当屏幕尺寸小于 992 像素时，会添加汉堡切换器。代码是这样的：

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

有没有可能改变汉堡切换按钮的颜色？

Answer 1

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

• 使用navbar-dark 在较暗的背景上切换浅色/白色
• 使用navbar-light 在较浅的背景上切换暗/灰色

---

// 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-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

因此，如果您想将切换器图像的颜色更改为其他颜色，您可以自定义图标。例如，这里我将 RGB 值设置为粉色 (255,102,203)。注意 SVG 数据中的 stroke='rgba(255,102,203, 0.5)' 值：

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

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 

演示 http://www.codeply.com/go/4FdZGlPMNV

OFC，另一种仅使用来自另一个库的图标的选项，即：Font Awesome 等。

---

更新 Bootstrap 4.0.0：

从 Bootstrap 4 Beta 开始，navbar-inverse 现在是 navbar-dark，可用于背景颜色较深的导航栏，以产生较浅的链接和切换器颜色。

---

How to change Bootstrap 4 Navbar colors

Answer 2

使用font-awesome icon 作为导航栏的默认图标。

<span class="navbar-toggler-icon">   
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

或者在旧的字体很棒的版本上试试这个：

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>

Answer 3

您可以非常简单地使用 css 创建切换按钮，无需在 SVG 或 ... foramt 中使用任何字体。

您的按钮：

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

您的按钮样式：

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

你的水平线样式：

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

演示

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}

<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>

Answer 4

如果您下载了引导程序，请转到bootstrap-4.4.1-dist/css/bootstrap.min.css

1. 找到.navbar-light .navbar-toggler-icon 或.navbar-dark .navbar-toggler-icon 选择器

2. 选择background-image 属性及其值。 sn-p 看起来像这样：

   .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   }
   

3. 复制 sn-p 并将其粘贴到您的自定义 CSS 中

4. 将 stroke='rgba(0, 0, 0, 0.5)' 值更改为您喜欢的 rgba 值

Answer 5

只需在导航元素中插入类navbar-dark 或navbar-light：

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

Answer 6

最简单的方法是替换这个默认的引导代码：

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

通过这个：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>

别忘了将此代码也添加到您的文件中：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

希望对你有帮助！

Answer 7

默认引导导航栏图标

<span class="navbar-toggler-icon"></span>

添加 Font Awesome 图标并删除 class="navbar-toggler-icon"

<span> <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i> </span>

Answer 8

是的，只需从您的代码中删除这个跨度：<span class="navbar-toggler-icon"></span>，然后粘贴这个名为 bar:<i class="fas fa-bars"></i> 的字体真棒图标，为这个图标添加一个类，然后输入您想要的任何颜色。

然后，第二步是从宽度超过992px（桌面宽度）的设备中隐藏此图标，因为如果您不添加此图标@987654324，此图标将出现在任何设备的界面中@ 在你的 CSS 代码中：

 /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    /* the class you gave of the bars icon ↑ */
    .iconClass{
        display: none;
    }
    /* the bootstrap toogler button class */
    .navbar-toggler{
        display: none;
    }
}

它也对我有用，我发现它很容易。

Answer 9

遇到这种情况的一个最简单的方法是使用 font awesome 示例

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
       <span><i class="fas fa-bars"></i></span>
</button>

然后您可以像更改任何其他 ielement 一样更改 i 元素。

Answer 10

作为替代方案，您始终可以尝试更简单的解决方法，使用另一个图标，例如：

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

参考：https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

参考：https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

因此您可以完全控制它们的颜色和大小：

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

（所应用的按钮样式只是为了快速测试）：

Answer 11

编辑：我的错！根据我的回答，该图标将不会作为切换器 实际上，即使不折叠它也会显示... 还在寻找中……

这可行：

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

我的回答提出的技巧是将navbar-toggler 替换为经典按钮类btn，然后如前所述，使用图标字体。

注意，如果你保留<button class="navbar-toggler">，按钮会有一个“奇怪”的形状。

正如post on github 中所述，引导程序使用了一些“css 技巧”，因此用户不必依赖字体。

所以，如果您想使用图标字体，请不要在按钮上使用 "navbar-toggler" 类。

干杯。

Answer 12

我刚刚开发了一个相当简单的解决方案。 （是的，我知道这是一个老问题，但研究同一问题的人可能会发现这很有用。）

我使用的是名为 hamburger.svg 的 SVG。我用文本编辑器查看了它，找不到任何为三行设置颜色的东西——我猜它默认为黑色，因为这肯定是我得到的行为——所以我只是添加了一个“stroke”参数SVG的定义。这并不完全奏效——三行的边界是我选择的颜色（白色），但行的其余部分仍然是黑色，所以我也添加了一个“填充”参数。这样就成功了！

这里是原始 hamburger.svg 的完整代码：

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

这是我编辑并保存为 hamburger_white.svg 后新 SVG 的代码：

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" stroke="white" fill="white"/></svg>

如您所见，如果您向右滚动，我所做的只是添加：

stroke="white" fill="white"

到路径的尽头。我必须做的另一件事是在 HTML 中更改汉堡包的文件名。完全不会弄乱 CSS，也不需要追踪另一个图标。

简单易懂！你可以模仿这个，让你的汉堡包变成你喜欢的任何颜色。

Answer 13

如果您在 _variables.scss 中使用 sass 版本的引导程序，您可以在 $navbar-inverse-toggler-bg 或 $navbar-light-toggler-bg 中找到可以更改的地方切换按钮的颜色和样式。

在 html 中，您必须使用 navbar-inverse 或 navbar-light，具体取决于您要使用的版本。

Answer 14

检查自定义汉堡导航的最佳解决方案。

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

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

<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>

demo image

Answer 15

尝试更改您的 SCSS： $navbar-dark-color: #abcdef; /* <-- here's your color */ 或 $navbar-light-color: #abcdef; 如果您使用灯光。