Comment ajouter vos propres icônes dans le bootstrap barre de navigation

De travail sur un projet, où j'ai commencé sur la barre de navigation. La chose que je me demande s'il est possible d'ajouter mes propres icônes à droite à côté de chacune des barres de menu ? Par exemple ce icônes: https://www.dropbox.com/sh/0be3c7ub4245kd6/zNMrvFi6Wq

Comme ceci:

DÉMO

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

Voulais juste voir si ma réponse répondu à votre question (j'ai dû mettre à jour le Dropbox Url de l'image, dans le cas où ils ne le montrait pas pour vous plus tôt).

OriginalL'auteur user3270211 | 2014-03-24

Voici un moyen de le faire sans ajouter une annotation supplémentaire, si vous avez besoin d'ajouter des classes uniques à chacun des liens d'ancrage.

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

Vous pouvez voir le résultat ici: http://jsfiddle.net/2WvpV/

Vous aurez besoin de jouer avec les marges et padding. Aussi, ce n'est pas parfait, car vous devriez probablement utiliser un dimensionnement relatif plutôt qu'en pixels.

OriginalL'auteur Darren

13

Vous pouvez soit utiliser la police impressionnant ou le bootstrap glyphe d'icônes. Juste ajouter quelque chose comme ça avant le texte de la glyphicon:
```

```
Ou cette police génial
```

```
Ou vous pouvez créer vos icônes d'image et de créer des classes css pour vos icônes.

Mise à jour de votre démo

Je veux utiliser mes propres icônes, c'est le problème.

OriginalL'auteur Trevor Orr

Ok @TrevorOrr réponse pour Bootstrap standard glyphes, mais n'oubliez pas d'enveloppe  balise à l'intérieur de la <a> tag. Exemple:

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

Si vous n'incluez pas le  à l'intérieur de l'ancre, le glyphe n'est pas affiché.

OriginalL'auteur Giorgio Calzolato

0

J'ai eu un problème similaire, mais la solution choisi ici n'a pas fonctionné. J'ai dû écraser les deux réponses ainsi que pour que cela fonctionne, c'est appliquer l'arrière-plan des attributs à un  imbriquées à l'intérieur des <a>. Pas de :before.

OriginalL'auteur Sassinak

Vous devez vous connecter pour publier un commentaire.