HTML Unicode ☰ 在 android chrome 浏览器的移动网络应用程序菜单中未检测到
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25929983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML unicode ☰ not detected in mobile web application menu in android chrome browser
提问by Mohammed Javed
i have a issue in my website menu in android mobile chrome browserthat is not able to show unicode ☰. but if i am check my web application in iPhone or other android browser it is rendering or working properly.
我在android 移动版 chrome 浏览器的网站菜单中有一个问题，无法显示unicode ☰。但是如果我在 iPhone 或其他 android 浏览器中检查我的网络应用程序，它正在呈现或正常工作。
I am used this icon in this structure
我在这个结构中使用了这个图标
<ul>
<li>☰?</li>
<li>Home</li>
<li>About Us</li>
</ul>
But it is not show in mobile chrome browser How to fix it!
但是在手机chrome浏览器中没有显示 如何解决！
采纳答案by Mohammed Javed
We can also create hamburger/menu icon using some CSSand HTMLstuff that works fine on all versions of browsers without making any break. It works fine on all mobile and desktop browsers.
我们还可以使用一些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>回答by Sergey Mashkov
The other alternative is to use ≡instead: it looks very similar:
另一种选择是使用≡：它看起来非常相似：
≡ instead of ?
≡ 而不是 ?
回答by Jukka K. Korpela
Apparently the reason is that no font in the system where the browser runs contains a glyph for “?” U+2630 TRIGRAM FOR HEAVEN.
显然原因是浏览器运行的系统中没有字体包含“？”的字形。U+2630 天卦。
The alternatives are:
替代方案是：
- Use an image instead.
- Use a downloadable font with
@font-face. This may mean that a few megabytes need to be loaded in the user's system.
- 改用图像。
- 使用可下载的字体
@font-face。这可能意味着需要在用户系统中加载几兆字节。
For general advice on such matters, see my Guide to using special characters in HTML.
有关此类问题的一般建议，请参阅我在 HTML 中使用特殊字符的指南。
回答by Pedram Ashofteh Ardakani
You could easily use three pipe characters |and rotate them 90degrees using the transform: rotate(90deg)function! Here's what I've done:
您可以轻松使用三个管道字符|并使用该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>
and in CSS:
在 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);
}
Enjoy ;-)
享受 ;-）
