Html 如何在引导程序导航栏中添加自己的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22617280/
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
How to add own icons in bootstrap navbar
提问by user3270211
Working on a project, where i started on the navbar. The thing i am wondering if its possible to add my own icons right next to each of the menu bars ? For example this icons: https://www.dropbox.com/sh/0be3c7ub4245kd6/zNMrvFi6Wq
在一个项目上工作，我从导航栏开始。我想知道是否可以在每个菜单栏旁边添加我自己的图标？例如这个图标：https: //www.dropbox.com/sh/0be3c7ub4245kd6/zNMrvFi6Wq
Like this:
像这样：
Code:
代码：
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
回答by Trevor Orr
You can either use font awesome or the bootstrap glyph icons. Just add something like this before the text for a glyphicon:
您可以使用 font awesome 或 bootstrap glyph 图标。只需在字形文本之前添加如下内容：
<span class="glyphicon glyphicon-search"></span>
Or this for font awesome
或者这个字体真棒
<span class="fa fa-search"></span>
Or you can create your image icons and create css classes for your icons.
或者，您可以创建图像图标并为图标创建 css 类。
回答by Darren
Here's a way to do it without adding any additional markup, though you do need to add unique classes to each of the anchor links.
这是一种无需添加任何额外标记即可完成的方法，但您确实需要为每个锚链接添加唯一的类。
CSS:
CSS：
.navbar-default .navbar-nav>.active>a:before,
.navbar-nav>li>a:before {
background-repeat: no-repeat;
background-position: 0 top;
content: "";
display: inline-block;
height: 29px;
margin-right: 10px;
vertical-align: middle;
width: 29px;
}
.navbar-default .navbar-nav>.active>a.home:before,
.navbar-nav>li>a.home:before { background-image: url('https://dl.dropboxusercontent.com/sh/0be3c7ub4245kd6/18Xnfucw14/home.png'); }
.navbar-default .navbar-nav>.active>a.about:before,
.navbar-nav>li>a.about:before { background-image: url('https://dl.dropboxusercontent.com/sh/0be3c7ub4245kd6/DhXiON5YiL/kveld.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.contact:before { background-image: url('https://dl.dropboxusercontent.com/sh/0be3c7ub4245kd6/_fidqgglaS/sol.png'); }
You can view the result here: http://jsfiddle.net/2WvpV/
你可以在这里查看结果：http: //jsfiddle.net/2WvpV/
You'll need to play around with the margins and padding. Also, this isn't perfect because you should probably use relative sizing rather than pixels.
您需要处理边距和填充。此外，这并不完美，因为您可能应该使用相对大小而不是像素。
回答by Giorgio Calzolato
Ok @TrevorOrr answer for Bootstrap standard glyphs, but remember to envelope <span>tag inside the <a>tag. Example:
好的 @TrevorOrr 回答 Bootstrap 标准字形，但请记住在<span>标签内封装<a>标签。例子：
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Envelope icon: <span class="glyphicon glyphicon-envelope"></span></a></li>
</ul>
</div>
</nav>
If you do not include the <span>inside the anchor, the glyph is not displayed.
如果不包括<span>锚点内部，则不会显示字形。
回答by Sassinak
I had a similar problem, but the solution picked here didn't work. I had to mash the two answers together for it to work, that is, apply background attributes to a <span class="icone icone-custom pull-right">nested within the <a>. No :before.
我遇到了类似的问题，但这里选择的解决方案不起作用。我必须将这两个答案混合在一起才能起作用，即将背景属性应用于<span class="icone icone-custom pull-right">嵌套在<a>. 没有:before。
