如何改变引导程序4导航栏按钮图标的颜色？

我有一个引导网站，其中的汉堡切换器是添加当屏幕尺寸小于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>

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

436514 次浏览
小开
最佳答案

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，另一个选项，只是使用一个图标从另一个库，即: 字体了不起，等等..。

更新 Bootstrap 4.0.0:

在 Bootstrap 4 Beta 测试版中，navbar-inverse现在是 navbar-dark，用于背景颜色较深的导航栏，以产生较浅的链接和切换颜色。

如何更改引导程序4导航栏的颜色

小开

如果你在 _variables.scss中使用自举程序，你可以找到 $navbar-inverse-toggler-bg或者 $navbar-light-toggler-bg，在那里你可以改变你的切换按钮的颜色和样式。

在 html 中，你必须使用 navbar-inverse或者 navbar-light，这取决于你想使用哪个版本。

小开

作为替代方案，你总是可以尝试一个更简单的解决方案，使用另一个图标，例如:

<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;
}

enter image description here

(按钮的样式应用只是为了快速测试) :

小开

使用 字体酷毙了的图标作为导航栏的默认图标。

<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>
小开

编辑: 我的错! 有了我的回答，图标将不会表现为一个切换器 事实上，它会显示，即使没有倒塌..。 还在找..。

这种方法可行:

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

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

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

如本 发布在 Github 上所述，bootstrap 使用了一些“ css 技巧”，因此用户不必依赖于字体。

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

干杯。

小开

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

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

你可以用 css 创建切换按钮，只是用一种非常简单的方式，不需要使用任何 SVG 或... 格式的字体。

你的按钮:

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

小开

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

@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>

演示图像

小开

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

我使用了一个叫做 hamburger.SVG 的 SVG。我用文本编辑器查看了一下，没有找到任何为三行设置颜色的东西——我猜它默认为黑色，因为这肯定是我得到的行为——所以我只是在 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，也不需要跟踪另一个图标。

小菜一碟! 你可以模仿它来做你喜欢的任何颜色的汉堡。

小开

默认引导导航栏图标

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

添加字体超赞图标并删除 class="navbar-toggler-icon"

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

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

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

  2. 选择 background-image属性及其值:

    .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. 复制代码片段并将其粘贴到自定义 CSS 中

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

小开

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

<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">

希望能有帮助！

小开

遇到这种情况的一个最简单的方法是使用字体可怕的例子

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

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

小开

是的，只要删除这个跨度从您的代码: <span class="navbar-toggler-icon"></span>，然后粘贴这个字体可怕的图标，称为酒吧: <i class="fas fa-bars"></i>，添加一个类到这个图标，然后把任何颜色你想要的。

然后，第二步是隐藏这个图标的设备宽度超过 992px(桌面宽度) ，因为这个图标会出现在你的界面在任何设备，如果你不添加这个 @media在你的 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;
}
}

这对我也很有效，而且我觉得很简单。

小开

试着改变你的 SCSS: 如果你使用的是光线，$navbar-dark-color: #abcdef; /* <-- here's your color */或者 $navbar-light-color: #abcdef;。


提交答案