it-swarm.com.de

Wie man eigene Icons in der Bootstrap-Navbar hinzufügt

Ich habe an einem Projekt gearbeitet, bei dem ich mit der Navbar angefangen habe. Ich frage mich, ob es möglich ist, neben jeder Menüleiste eigene Symbole hinzuzufügen. Zum Beispiel diese Symbole: https://www.dropbox.com/sh/0be3c7ub4245kd6/zNMrvFi6Wq

So was:

enter image description here

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

So können Sie dies tun, ohne zusätzliche Markierungen hinzuzufügen. Sie müssen jedoch zu jedem Anker-Link eindeutige Klassen hinzufügen.

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 können das Ergebnis hier einsehen: http://jsfiddle.net/2WvpV/

Sie müssen mit den Rändern und der Polsterung herumspielen. Dies ist auch nicht perfekt, da Sie eher relative Größe als Pixel verwenden sollten.

7
Darren

Sie können entweder font awesome oder die Bootstrap-Symbolsymbole verwenden. Fügen Sie einfach so etwas vor dem Text für ein Glyphikon hinzu:

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

Oder das für eine tolle Schrift

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

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

Deine aktualisierte Demo

13
Trevor Orr

Ok @TrevorOrr Antwort für Bootstrap-Standard-Glyphen. Denken Sie jedoch daran, das <span>-Tag im <a>-Tag einzuhüllen. 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 den <span> nicht in den Anker einfügen, wird die Glyphe nicht angezeigt.

2

Ich hatte ein ähnliches Problem, aber die hier gewählte Lösung funktionierte nicht. Ich musste die beiden Antworten zusammenmischen, damit es funktioniert, dh Hintergrundattribute auf ein <span class="icone icone-custom pull-right"> anwenden, das in dem <a> verschachtelt ist. Nein :before

0
Sassinak