Bootstrap - 来自 CSS 中的图像的自定义汉堡菜单图标答案

【问题标题】：Bootstrap - custom hamburger menu icon from image sourced in CSSBootstrap - 来自 CSS 中的图像的自定义汉堡菜单图标
【发布时间】：2017-03-03 05:10:39
【问题描述】：

我正在破解网站项目，并且在屏幕宽度足够小时，我正在努力让引导下拉图标从自定义 CSS 中显示。我敢肯定这是一件非常简单但似乎无法弄清楚的事情。

最终看起来像一个复选框：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Website Name</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <a href="#" id="test-icon">
      </button>
      <a class="navbar-brand" href="index.html"><img alt="logo" src="images/db_logo_clean_60.png"</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
</div>

</body>
</html>

CSS：

    #test-icon {

    display: hidden;
    width: 40px;
    height: 40px;
    background: #515151 url(../images/menu-icon.png) center;


}

【问题讨论】：

display:hidden 不是一个东西，如果它是一个a 元素，你需要给它display:block 或display:inline-block 给它高度和宽度参数。尽管a 甚至没有显示在navbar-toggle 中，但它确实出现了。也许，跳过中间人，只需将background 应用于navbar-toggle？

标签： html css twitter-bootstrap hamburger-menu

【解决方案1】：

只需根据您的 css 修改标准引导导航栏--检查 css 我即兴的方式--

工作示例

 .navbar-inverse .navbar-toggle .test-icon  {
    background-color: #fff;
    background:  url(https://cdn0.iconfinder.com/data/icons/ui-icons-pack/100/ui-icon-pack-01-512.png) center;
}
.navbar-toggle .test-icon {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      
      <style type="text/css">
     


       </style>
       <script type="text/javascript">
        
       </script>
       </head>
      
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        
         <a href="#" class="test-icon"></a>
        <!--<span class="test-icon"></span>
        <span class="test-icon"></span>--> 
      </button>
      <a class="navbar-brand" href="index.html"><img alt="logo" src="images/db_logo_clean_60.png"</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
</div>

</body>
</html>
</body>
</html>

注意：我从互联网上选择了我自己的汉堡包图片..只需将其替换为您的。

希望这会有所帮助！

【讨论】：

【解决方案2】：

简单的css解决方案

.navbar-header button.navbar-toggle {
    display: none;
}

如果您可以访问 HTML，请移除按钮

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"><a href="#" id="test-icon"></a></button>

【讨论】：