我在我的网站菜单中遇到了问题,在Android移动Chrome浏览器中不能显示Unicode ☰。但如果我在iPhone或其他Android浏览器中检查我的Web应用程序,它会正确呈现或工作。
我在以下结构中使用了这个图标
<ul>
<li>☰☰</li>
<li>Home</li>
<li>About Us</li>
</ul>
但是在移动版Chrome浏览器中没有显示出来 如何修复它!
我在我的网站菜单中遇到了问题,在Android移动Chrome浏览器中不能显示Unicode ☰。但如果我在iPhone或其他Android浏览器中检查我的Web应用程序,它会正确呈现或工作。
我在以下结构中使用了这个图标
<ul>
<li>☰☰</li>
<li>Home</li>
<li>About Us</li>
</ul>
但是在移动版Chrome浏览器中没有显示出来 如何修复它!
≡
代替:它看起来非常相似:≡ 代替 ☰
我们也可以使用一些CSS和HTML技巧来创建汉堡/菜单图标,而不会对任何浏览器版本造成影响。它在所有移动设备和桌面浏览器上都可以正常工作。
.hamburger-icon {
margin: 0;
padding: 19px 16px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.hamburger-icon span {
width: 40px;
background-color: #000;
height: 5px;
display: block;
margin-bottom: 6px;
}
.hamburger-icon span:last-child {
margin-bottom:0px;
}
<label class="hamburger-icon">
<span> </span>
<span> </span>
<span> </span>
</label>
@font-face
。这意味着需要在用户系统中加载几兆字节。有关此类问题的一般建议,请参见我的HTML特殊字符指南。|
,并使用transform: rotate(90deg)
函数将它们旋转90度!这是我所做的: <nav role="navigation" id="nav-hamburger-wrapper">
<input type="checkbox" id="nav-hamburger-input"/>
<label for="nav-hamburger-input">|||</label>
</nav>
并在CSS中:
#nav-hamburger-wrapper label,
#nav-hamburger-input {
transform: rotate(90deg);
transition-duration: 0.3s; /* give it a rotation effect when checked */
}
#nav-hamburger-wrapper input:checked + label {
transform: rotate(0);
}
享受吧 ;-)