Bootstrap 4更改汉堡包Toggler颜色

时间:2017-03-03 19:14:19

标签: css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

我有一个引导程序网站,当屏幕小于992像素时会添加Hamburger。 HamBurger代码就像这样

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

是否有可能改变HamBurger按钮的颜色?

14 个答案:

答案 0 :(得分:152)

Bootstrap 4中的navbar-toggler-icon(汉堡包)使用SVG background-image。有2个版本&#34;切换器图标图像。一个用于轻型导航栏,另一个用于暗导航栏......

  • 在较暗的背景上使用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

答案 1 :(得分:25)

只需在默认图标范围内的“i”标签中使用font-awesome,然后使用CSS更改添加图标的颜色。

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon"></i>
</span>
.fa.fa-navicon {
  color:white;
}

答案 2 :(得分: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"> 

希望有帮助!

答案 3 :(得分:5)

如果您下载了引导程序,请转到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值

答案 4 :(得分:2)

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

然后,第二步是对宽度超过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;
    }
}

它也对我有用,而且我觉得它很容易。

答案 5 :(得分:1)

默认引导导航栏图标

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

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

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

答案 6 :(得分:1)

一种最简单的解决方法是使用超棒的字体

 <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元素。

答案 7 :(得分:0)

如果你在 _variables.scss 中使用sass版本的bootstrap,你可以找到 $navbar-inverse-toggler-bg $navbar-light-toggler-bg 您可以在其中更改切换按钮的颜色和样式。

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

答案 8 :(得分:0)

编辑:我不好!根据我的回答,该图标将无法用作切换器 实际上,即使没有折叠它也会显示出来... 仍在搜索...

这可以工作:

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

干杯。

答案 9 :(得分:0)

您只能通过一种非常简单的方法用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>

答案 10 :(得分:0)

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

我正在使用一个名为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>

这是我编辑新的SVG并将其保存为hamburger_white.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,也无需跟踪另一个图标。

轻松豌豆!您可以模仿它使您的汉堡包任何您喜欢的颜色。

答案 11 :(得分:-1)

作为替代方案,您始终可以使用其他图标尝试更简单的解决方法,例如:

<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

应用的按钮样式仅用于快速测试):

答案 12 :(得分:-1)

只需在导航元素中插入类LocationManager.AddTestProvidernavbar-dark

navbar-light

答案 13 :(得分:-1)

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

@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