twitter-bootstrap 用其他图标替换引导程序导航栏中的图标栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14537044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
replace icon-bar in bootstrap navbar with other icons
提问by Josslin
i'm trying to replace the three bars in the navbar button, which appears, when navbar collapses.
我正在尝试替换导航栏折叠时出现的导航栏按钮中的三个栏。
The original code is:
原代码为：
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
i tried to the following instead, but it did not work:
我尝试了以下操作，但没有用：
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-envelope"></span>
</a>
can anybody help please?
有人可以帮忙吗？
回答by David Taiaroa
You can replace what's inside the navbar toggle button with anything you like, including different icons or text. Here's a working example with the envelope icon:
http://jsfiddle.net/panchroma/RWPdu/
您可以将导航栏切换按钮内的内容替换为您喜欢的任何内容，包括不同的图标或文本。这是一个带有信封图标的工作示例：http:
//jsfiddle.net/panchroma/RWPdu/
You'll see there's nothing unusual in the HTML, so if it still doesn't work for you you could start by checking that glyphicons are correctly installed by testing an icon in the page body.You could also check that it's not a color issue -- eg white text on a white background.
您会看到 HTML 中没有任何异常，因此如果它仍然对您不起作用，您可以通过测试页面正文中的图标来检查字形是否正确安装。您还可以检查它是否不是颜色问题-- 例如，白色背景上的白色文本。
Good luck!
祝你好运！
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-envelope"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
</div>
</div>
