如何在自举导航栏中添加自己的图标

正在开发导航栏的项目上工作。我想知道是否可以在每个菜单栏旁边添加我自己的图标？例如这个图标：https://www.dropbox.com/sh/0be3c7ub4245kd6/zNMrvFi6Wq 如何在自举导航栏中添加自己的图标

像这样：

enter image description here

DEMO

代码：

<!-- 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 &raquo;</a> 
     </p> 
     </div> 

    </div> <!-- /container -->

来源

2014-03-24 user3270211

只是想看看我的回复是否回答了您的问题（我不得不更新Dropbox图片网址，以防他们之前未显示）。 – Darren

这里有一个办法做到这一点不添加任何附加标记，但你确实需要独特的类添加到每个锚链接。

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

您可以查看这里的结果：http://jsfiddle.net/2WvpV/

你需要玩的边距和填充。此外，这并不完美，因为您应该使用相对大小而不是像素。

来源

2014-03-24 19:05:24 Darren

您可以使用字体真棒或引导字形图标。只需添加像这样的文字，但glyphicon前：

<span class="glyphicon glyphicon-search"></span>

还是这对字体真棒

<span class="fa fa-search"></span>

或者你可以创建你的形象的图标，并为您的图标创建CSS类。

Your updated demo

来源

2014-03-24 18:47:42

我想使用我自己的图标，这就是问题所在。 – user3270211

Ok @TrevorOrr对Bootstrap标准字形的回答，但请记住在<a>标记内包含<span>标记。例如：

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

如果不包括锚内<span>，不显示字形。

来源

2015-03-24 20:13:02

我有类似的问题，但在这里选择的解决方案没有奏效。我必须将这两个答案混合在一起才能正常工作，即将背景属性应用于嵌套在<a>内的<span class="icone icone-custom pull-right">。否:before。

来源

2018-01-30 19:07:31 Sassinak

如何在自举导航栏中添加自己的图标

回答

相关问题