在导航栏上的切换图标旁边添加徽标

Question

我很新鲜到HTML & CSS。我已经开始自定义Bootstrap模板，并且希望在图标栏旁边添加一个徽标，但是这个导航栏似乎比我玩过的基本Bootstrap导航栏更加棘手。如果有人能帮我指出我在哪里查看代码，或者通过提供一两个示例，我将不胜感激。这是我自定义的模板link。我想要在this之类的切换按钮旁边放置一个图像，其中一个是“菜单”。

HTML：

<nav id="navigation" class="navbar scrollspy"> 

    <!-- .container --> 
    <div class="container"> 

     <div class="navbar-brand"> 
      <a href="index.html"><img src="images/logo.png" alt="Logo" /></a> <!-- site logo --> 
     </div> 

     <ul class="nav navbar-nav"> 
      <li><a href="#header" class="smooth-scroll">Home</a></li> 
      <li><a href="#about" class="smooth-scroll">About</a></li> 
      <li><a href="#features" class="smooth-scroll">Features</a></li> 
      <li><a href="#portfolios" class="smooth-scroll">Portfolios</a></li> 
      <li><a href="#whyus" class="smooth-scroll">Why Us?</a></li> 
      <li><a href="page.html">Page</a></li> 
      <li class="menu-btn"><a href="page_contact.html">Contact</a></li> 
     </ul> 

    </div> 
    <!-- .container end --> 

</nav> 

CSS：

/* Navigation Mobile */ 
#navigation_mobile { 
    display:none; 
    font-size:14px; 
    line-height:18px; 
    text-align:center; 
    font-weight:600; 
    text-transform:uppercase; 
} 
#navigation_mobile .nav-menu-links { 
    display:none; 
    background-color:#2a2a2a; 
} 
#navigation_mobile ul { 
    padding:30px 100px; 
    margin:0px; 
} 
#navigation_mobile ul li { 
    list-style-type:none; 
    padding:11px 0px; 
} 
#navigation_mobile ul li a { 
    display:block; 
    color:#a9a9a9; 
} 
#navigation_mobile ul li a:hover { color:#FFF; } 
#navigation_mobile .nav-menu-button { 
    background-color:#202020; 
    padding:15px 0px 14px; 
} 
#navigation_mobile .nav-menu-button button.nav-menu-toggle { 
    color:#a9a9a9 !important; 
    font-size:24px; 
    line-height:1; 
    background:none; 
    padding:0px; 
    border:0px; 
    border-radius:0px; 
    -webkit-transition:color .2s ease; 
    transition:color .2s ease; 
} 
#navigation_mobile .nav-menu-button button.nav-menu-toggle:hover { color:#FFF !important; } 

#header .navbar { display:none;} 
#navigation_mobile { display:block; } 

Answer 1

你可以简单地添加文本到图像。并通过定义图像中的文本：

<img src="logo.png" alt="My Logo">