如何在手机上显示汉堡图标“☰”？

Question

I have a custom navigation menu using pure html/css (not bootstrap) , There is a burger icon that should appear on mobile phones : 我有一个使用纯html / css（不是bootstrap）的自定义导航菜单，手机上应该出现一个汉堡图标：

<label for="toggle">&#9776;</label>

It appears on computer when I minimize the browser width , but not on mobile phones , I think the problem is "☰" 当我最小化浏览器宽度时，它会出现在计算机上，但不会出现在手机上，我认为问题是"☰" , Is there is a unicode for it or any alternatives that would work o mobile phones ? ，是否有unicode或任何其他适用于手机的代码？

Answer 1

Try using: 尝试使用：

<label for="toggle">&#8801;</label>

this should hopefully fix your issue on mobile! 这有望解决您在移动设备上的问题！ Hope it helps. 希望能帮助到你。

Answer 2

Try using css pseudo class like :after and :before . 尝试使用CSS伪类，例如:after和:before 。 it works all across browser and device. 它适用于所有浏览器和设备。

 .header { background-color: #333; width: 100%; } .header nav { width: 100%; margin: 0 auto; position: sticky; height: 100vh; top: 0px; } .header nav .btn { outline: none; border: none; display: block; cursor: pointer; background-color: #fff; width: 2.5rem; height: 2.5rem; margin: 16px; } .header nav .btn span { background-color: #FD5B4E; width: 95%; height: 0.1875rem; position: relative; display: block; margin: auto; top: 50%; } .header nav .btn span:before { content: ''; background-color: #FD5B4E; width: 100%; height: 0.1875rem; display: block; top: -0.625rem; position: absolute; } .header nav .btn span:after { content: ''; background-color: #FD5B4E; width: 100%; height: 0.1875rem; display: block; position: absolute; top: 0.625rem; }

 <body> <header id="header" class="header sidbar"> <nav> <button class="btn"><span></span></button> </nav> </header> <!-- /header --> </body>

Answer 3

This is the menu that i'm using, it is pure CSS/HTML and makes a hamburger icon for phones: 这是我正在使用的菜单，它是纯CSS / HTML，并为电话制作了一个汉堡包图标：

HTML: HTML：

<header class="navigation">
            <a href="" class="logo"><img border="0" alt="Logo" src="images/logo.png" width="33" height="36.4">Logo</a>
            <input class="button" type="checkbox" id="button" />
            <label class="icon" for="button"><span class="navicon"></span></label>
            <ul class="menu">
                <li><a href="#work">Tutorials</a></li>
                <li><a href="#about">Creations</a></li>
                <li><a href="#careers">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </header>

CSS: CSS：

.menu {
  position:relative;
}

.navigation {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
}

.navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.navigation li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
  color:#000000;
}

.navigation li a:hover,
.navigation .button:hover {
  background-color: #f4f4f4;
}

.navigation .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
  color:#000000;
}

.navigation .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
  font-family: 'Open Sans', sans-serif;
  text-transform:uppercase;
}

.navigation .icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.navigation .icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.navigation .icon .navicon:before,
.navigation .icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.navigation .icon .navicon:before {
  top: 5px;
}

.navigation .icon .navicon:after {
  top: -5px;
}

.navigation .button {
  display: none;
}

.navigation .button:checked ~ .menu {
  max-height: 240px;
}

.navigation .button:checked ~ .icon .navicon {
  background: transparent;
}

.navigation .button:checked ~ .icon .navicon:before {
  transform: rotate(-45deg);
}

.navigation .button:checked ~ .icon .navicon:after {
  transform: rotate(45deg);
}

.navigation .button:checked ~ .icon:not(.steps) .navicon:before,
.navigation .button:checked ~ .icon:not(.steps) .navicon:after {
  top: 0;
}

@media (min-width: 48em) {
  .navigation li {
    float: left;
  }
  .navigation li a {
    padding: 20px 30px;
  }
  .navigation .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .navigation .icon {
    display: none;
  }
}

jsfiddle: https://jsfiddle.net/96a2pudt/2/ jsfiddle： https ://jsfiddle.net/96a2pudt/2/

如何在手机上显示汉堡图标“☰”？

问题描述

3 个解决方案

解决方案1
0 2017-10-21 15:59:30

解决方案2
0 2017-10-21 16:02:51

解决方案3
0 2017-10-21 16:54:20

如何在手机上显示汉堡图标“☰”？

问题描述

3 个解决方案

解决方案1 0 2017-10-21 15:59:30

解决方案2 0 2017-10-21 16:02:51

解决方案3 0 2017-10-21 16:54:20

解决方案1
0 2017-10-21 15:59:30

解决方案2
0 2017-10-21 16:02:51

解决方案3
0 2017-10-21 16:54:20