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

【问题标题】：How to show burger icon "☰" on mobile phones?如何在手机上显示汉堡图标“☰”？
【发布时间】：2018-04-02 13:31:38
【问题描述】：

我有一个使用纯html/css（不是引导程序）的自定义导航菜单，有一个汉堡图标应该出现在手机上：

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

当我最小化浏览器宽度时它出现在计算机上，但在手机上没有，我认为问题是"&#9776;"，是否有它的 unicode 或任何可以在手机上使用的替代方法？

【问题讨论】：

请记住&9776; 是一个带有specific meaning 的unicode 字符的实体；那个意思不是“汉堡菜单”。 :) 还有许多其他类似的字符，例如&#8801;，它更常用于此目的，并且更有可能工作，因为它是更普遍支持的字符。对于汉堡菜单而言，语义上仍然不正确，但如果您必须使用字符，请使用这个）。
What is a fallback for the "hamburger icon" or HTML entity ☰?的可能重复

标签： html css unicode

【解决方案1】：

尝试使用：

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

这有望解决您在移动设备上的问题！希望对您有所帮助。

【讨论】：

【解决方案2】：

尝试使用 :after 和 :before 这样的 css 伪类。它适用于所有浏览器和设备。

.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>

【讨论】：

【解决方案3】：

这是我正在使用的菜单，它是纯 CSS/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：

.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/

【讨论】：