web-dev-qa-db-fra.com

Comment ajouter ses propres icônes dans la barre de navigation bootstrap

Travailler 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 juste à côté de chacune des barres de menus? Par exemple ces icônes: https://www.dropbox.com/sh/0be3c7ub4245kd6/zNMrvFi6Wq

Comme ça:

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

Voici un moyen de le faire sans ajouter de balisage supplémentaire, bien que vous deviez 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 devrez jouer avec les marges et le rembourrage. En outre, ceci n'est pas parfait car vous devriez probablement utiliser un dimensionnement relatif plutôt que des pixels.

7
Darren

Vous pouvez utiliser la police awesome ou les icônes de glyphes bootstrap. Ajoutez juste quelque chose comme ceci avant le texte pour un glyphicon:

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

Ou ceci pour une police géniale

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

Ou vous pouvez créer vos icônes d’image et créer des classes CSS pour vos icônes.

Votre démo mise à jour

13
Trevor Orr

Ok @TrevorOrr answer pour les glyphes standard Bootstrap, mais n'oubliez pas d'envelopper la balise <span> à l'intérieur de la balise <a>. 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 <span> à l'intérieur de l'ancre, le glyphe n'est pas affiché.

2
Giorgio Calzolato

J'ai eu un problème similaire, mais la solution choisie ici n'a pas fonctionné. J'ai dû écraser les deux réponses ensemble pour que cela fonctionne, c'est-à-dire appliquer des attributs d'arrière-plan à un <span class="icone icone-custom pull-right"> imbriqué dans le <a>. Non :before. 

0
Sassinak