So fügen Sie eigene Symbole in bootstrap navbar

Question

Arbeiten an einem Projekt, wo ich begann auf der Navbar. Die Sache frage ich mich, ob es möglich ist, meine eigenen Icons direkt neben jedem der Menüleisten hinzuzufügen? Zum Beispiel diese Symbole: https://www.dropbox.com/sh/0be3c7ub4245kd6/zNMrvFi6Wq

So:

• DEMO

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

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

Answer 1

Hier ist ein Weg, es zu tun, ohne zusätzliche Markup hinzufügen, wenn Sie zu jedem der Anker Links einzigartige Klassen hinzufügen müssen.

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

Sie das Ergebnis hier betrachten: http://jsfiddle.net/2WvpV/

Sie brauchen mit den Margen und Polsterung zu spielen, um. Auch das ist nicht perfekt, weil Sie wahrscheinlich relative Größe statt Pixel verwenden sollten.

Answer 2

Sie können entweder Schrift genial oder die Bootstrap-Glyphe Symbole. so etwas wie dieses nur hinzufügen, bevor der Text für eine glyphicon:

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

Oder diese für Schrift ehrfürchtige

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

Oder Sie können Ihre Bildsymbole erstellen und CSS-Klassen für Ihre Symbole erstellen.

Your updated demo

Answer 3

Ok @TrevorOrr Antwort für Bootstrap-Standard-Glyphen, aber denken Sie daran, Umschlag <span> Tag innerhalb der <a> Tag. Beispiel:

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

Wenn Sie nicht über die <span> im Inneren des Ankers umfassen, wird die Glyphe nicht angezeigt.

Answer 4

Ich hatte ein ähnliches Problem, aber die hier gewählte Lösung hat nicht funktioniert. Ich musste die zwei Antworten zusammen mischen, damit es funktioniert, das heißt, Hintergrundattribute auf eine <span class="icone icone-custom pull-right"> verschachtelte innerhalb der <a>. Nr. :before.