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

-4

我很新鲜到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; }

来源

2016-09-15 Corey Shaw

问题寻求帮助调试（“**为什么不是这个代码工作的**？”）必须包括所期望的行为，一个特定的问题或错误，最短代码必需在问题本身**中重现**。没有明确问题声明**的问题对其他读者无效。请参阅：[如何创建最小，完成和可验证示例]（http://stackoverflow.com/help/mcve）。 – j08691

对不起，我解决了这个问题。 –

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

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

来源

2016-09-15 20:46:33 coffee3k

对不起，我不明白你的答案。我正在尝试将徽标图像添加到切换图标！ –

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

回答

相关问题