Bootstrap - Comment ajouter un logo à la barre de navigation de la classe?

Je voudrais ajouter un logo pour le haut de la barre de navigation dans la barre de navigation de marque. Je le voudrais pour évoluer avec la taille de la fenêtre donc je suis en utilisant img-responsive2 classe.

Il semble qu'à la fois l'image et le texte dans la barre de navigation de marque sont le retour à la ligne.

Cette page peut être consultée à http://digitalponddesign.com/dev/

Merci d'avance pour votre aide.

Voici mon code:

Html

   <h2 class="navbar-brand brand-name">
       <a href="index.html"><img class="img-responsive2"       
       src="images/DigitalPondlogo.png">DigitalPond</a>
   </h2>

CSS

.navbar {
margin: 10px 0;

}
.navbar-default {
background-color: #fff;
border-color: #fff;
}
.brand-name {
font-family: 'Josefin Slab', serif;
font-size: 47px;
font-weight: bold;
color: #444;
text-decoration: none;
}

.nav-container {
padding-top: 8px;
}

.navbar-custom {
font-size: 20px;
background-color: #FFF;

}
double possible de Bootstrap 3 Navbar avec le Logo

OriginalL'auteur Design2u | 2015-02-06

  1. 13

    J'ai trouvé une solution sur un autre thread, qui travaille - utiliser le pull-gauche classe:

     <a href="#" class="pull-left"><img src="/path/to/image.png"></a>

    Grâce à Michael dans ce thread:

    Bootstrap - Comment ajouter un logo à la barre de navigation de la classe?

    Comment est-il possible d'utiliser à la fois l'image et le logo de l'utilisation de cette approche? Pouvez-vous réduire progressivement la taille du texte lorsque vous redimensionnez-la pour les navigateurs mobiles?

    OriginalL'auteur Design2u

  2. 3

    Vous pouvez simplement afficher à la fois le texte et l'image en ligne-blocs de sorte qu'ils ne sont pas de pile. à l'aide de flotteurs comme pull-gauche/pull-droit peut provoquer des problèmes, de sorte qu'ils doivent être utilisés avec parcimonie

    <a class="navbar-brand" href="#">
  <img src="mylogo.png" style="display: inline-block;">
  <span style="display: inline-block;">My Company</span>
</a>

    OriginalL'auteur vbranden

  3. 2

    Pour ceux utilisant bootstrap 4 bêta, vous pouvez ajouter max-width sur votre barre de navigation de lien pour avoir le contrôle sur la taille de votre logo avec img-classe fluide sur l'élément de l'image.

     <a class="navbar-brand" href="#" style="max-width: 30%;">
    <img src="images/logo.png" class="img-fluid">
 </a>

    OriginalL'auteur Yeku Wilfred Chetat

  4. 0

    Je vous suggère d'utiliser une image ou du texte. Donc, Supprimer le texte et l'ajouter dans votre image(à l'aide de Photoshop, peut-être).
    Ensuite, Utilisez une largeur et une hauteur de 100% de l'image. il fera l'affaire. parce que l'image peut être redimensionnée basée sur le conteneur. Mais, vous devez redimensionner manuellement le texte. Si vous pouvez fournir le violon, je peux vous aider à atteindre cet objectif.

    Grâce Sanjith! Je voudrais utiliser du texte pour les fins de SEO. Je vais essayer de trouver un texte et de l'image du logo de la solution.
    Vous pouvez utiliser l'attribut alt de l'image pour les fins de SEO. Tous les meilleurs
    J'ai trouvé une solution qui fonctionne. <a href="#" class="pull-left"><img src="/chemin/vers/image.png"></a>
    From: stackoverflow.com/questions/18474564/... Réponse fournie par Michael stackoverflow.com/users/911058/michael Merci sanjith!
    Comment allez-vous ajouter à la fois l'image et le texte à l'aide?

    OriginalL'auteur sanjith edward

  5. 0
    <a class="navbar-brand" href="#" style="padding:0px;">
  <img src="mylogo.png" style="height:100%;">
</a>

    Pour l'inclusion d'un texte:

    <a class="navbar-brand" href="#" style="padding:0px;">
  <img src="mylogo.png" style="height:100%;display:inline-block;"><span>text</span>
</a>
    Il semble que votre réponse ne pas inclure n'importe quel texte. Aussi, s'il vous plaît ajouter une explication à votre réponse.

    OriginalL'auteur Jacob Mathen Alex

  6. 0

    Entrer dans l'image et donner height:100%;width:auto alors il suffit de changer la hauteur de la barre de navigation de lui-même pour redimensionner l'image. Il est un très bon exemple dans codepen. https://codepen.io/bootstrapped/pen/KwYGwq

    OriginalL'auteur Nagibaba

  7. 0

    Utiliser un style d'image de la largeur et de la hauteur de 100% . Cela fera l'affaire, parce que l'image peut être redimensionnée basée sur le conteneur.

    Exemple:

    <a class="navbar-brand" href="#" style="padding: 4px;margin:auto"> <img src="images/logo.png" style="height:100%;width: auto;" title="mycompanylogo"></a>

    OriginalL'auteur Christos Ploutarchou