汉堡菜单图标☰未出现在日本野生动物园中

Posted 2023-02-24

技术标签:

【中文标题】汉堡菜单图标☰未出现在日本野生动物园中【英文标题】：Hamburger menu icon ☰ not appearing on Japanese safari 【发布时间】：2018-06-25 09:16:33 【问题描述】：

我有一些包含汉堡菜单字符的基本 html，如下所示：

<div>☰</div>

问题是该字符在日语浏览器上不可见。我的头上有<meta charset="utf-8">。

我需要做什么才能让它工作？

【问题讨论】：

你看到了什么？你可以试试这样的：<div>&#9776;</div>这叫做天堂的TRIGRAM。 @C-Otto：我什么都没看到，即使是六进制？ <div>&#x2630;<div> 你可以试试这个 ≡ 给定here的一些逻辑 【参考方案1】：

也许您可以使用 svg 获得更好的结果。

您必须检查您使用的字体是否包含该字符。

<svg encoding="UTF-8" >
  <text x="10"  y="50" font-size="55">
    &#8801;
  </text>
</svg>

您也可以从这里设置字体系列。最好不要依赖客户端默认字体设置。

见https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

如果需要：Responsive SVG text

还有一些其他类似的替代图标可以直接使用：

☰TRIGRAM FOR HEAVEN Hex: 2630 | Dec: 9776
☱TRIGRAM FOR LAKE Hex: 2631 | Dec: 9777
☲TRIGRAM FOR FIRE Hex: 2632 | Dec: 9778
☳TRIGRAM FOR THUNDER Hex: 2633 | Dec: 9779
☴TRIGRAM FOR WIND Hex: 2634 | Dec: 9780
☵TRIGRAM FOR WATER Hex: 2635 | Dec: 9781
☶TRIGRAM FOR MOUNTAIN Hex: 2636 | Dec: 9782
☷TRIGRAM FOR EARTH Hex: 1D0D3 | Dec: 118995
䷀HEXAGRAM FOR THE CREATIVE HEAVEN Hex: 4DC0 | Dec: 19904
䷁HEXAGRAM FOR THE RECEPTIVE EARTH Hex: 4DC1 | Dec: 19905
䷂HEXAGRAM FOR DIFFICULTY AT THE BEGINNING Hex: 4DC2 | Dec: 19906
䷃HEXAGRAM FOR YOUTHFUL FOLLY Hex: 4DC3 | Dec: 19907
䷄HEXAGRAM FOR WAITING Hex: 4DC4 | Dec: 19908
䷅HEXAGRAM FOR CONFLICT Hex: 4DC5 | Dec: 19909
䷆HEXAGRAM FOR THE ARMY Hex: 4DC6 | Dec: 19910
䷇HEXAGRAM FOR HOLDING TOGETHER Hex: 4DC7 | Dec: 19911
䷈HEXAGRAM FOR SMALL TAMING Hex: 4DC8 | Dec: 19912
䷉HEXAGRAM FOR TREADINGHex: 4DC9 | Dec: 19913
䷊HEXAGRAM FOR PEACE Hex: 4DCA | Dec: 19914
䷋HEXAGRAM FOR STANDSTILL Hex: 4DCB | Dec: 19915
䷌HEXAGRAM FOR FELLOWSHIP Hex: 4DCC | Dec: 19916
䷍HEXAGRAM FOR GREAT POSSESSION Hex: 4DCD | Dec: 19917
䷎HEXAGRAM FOR MODESTY Hex: 4DCE | Dec: 19918
䷏HEXAGRAM FOR ENTHUSIASM Hex: 4DCF | Dec: 19919
䷐HEXAGRAM FOR FOLLOWING Hex: 4DD0 | Dec: 19920
䷑HEXAGRAM FOR WORK ON THE DECAYED Hex: 4DD1 | Dec: 19921
䷒HEXAGRAM FOR APPROACH Hex: 4DD2 | Dec: 19922
䷓HEXAGRAM FOR CONTEMPLATION Hex: 4DD3 | Dec: 19923
䷔HEXAGRAM FOR BITING THROUGH Hex: 4DD4 | Dec: 19924
䷕HEXAGRAM FOR GRACE Hex: 4DD5 | Dec: 19925
䷖HEXAGRAM FOR SPLITTING APART Hex: 4DD6 | Dec: 19926
䷗HEXAGRAM FOR RETURN Hex: 4DD7 | Dec: 19927
䷘HEXAGRAM FOR INNOCENCE Hex: 4DD8 | Dec: 19928
䷙HEXAGRAM FOR GREAT TAMING Hex: 4DD9 | Dec: 19929
䷚HEXAGRAM FOR MOUTH CORNERS Hex: 4DDA | Dec: 19930
䷛HEXAGRAM FOR GREAT PREPONDERANCE Hex: 4DDB | Dec: 19931
䷜HEXAGRAM FOR THE ABYSMAL WATER Hex: 4DDC | Dec: 19932
䷝HEXAGRAM FOR THE CLINGING FIRE Hex: 4DDD | Dec: 19933
䷞HEXAGRAM FOR INFLUENCE Hex: 4DDE | Dec: 19934
䷟HEXAGRAM FOR DURATION Hex: 4DDF | Dec: 19935
䷠HEXAGRAM FOR RETREAT Hex: 4DE0 | Dec: 19936
䷡HEXAGRAM FOR GREAT POWER Hex: 4DE1 | Dec: 19937
䷢HEXAGRAM FOR PROGRESS Hex: 4DE2 | Dec: 19938
䷣HEXAGRAM FOR DARKENING OF THE LIGHT Hex: 4DE3 | Dec: 19939
䷤HEXAGRAM FOR THE FAMILY Hex: 4DE4 | Dec: 19940
䷥HEXAGRAM FOR OPPOSITION Hex: 4DE5 | Dec: 19941
䷦HEXAGRAM FOR OBSTRUCTION Hex: 4DE6 | Dec: 19942
䷧HEXAGRAM FOR DELIVERANCE Hex: 4DE7 | Dec: 19943
䷨HEXAGRAM FOR DECREASE Hex: 4DE8 | Dec: 19944
䷩HEXAGRAM FOR INCREASE Hex: 4DE9 | Dec: 19945
䷪HEXAGRAM FOR BREAKTHROUGH Hex: 4DEA | Dec: 19946
䷫HEXAGRAM FOR COMING TO MEET Hex: 4DEB | Dec: 19947
䷬HEXAGRAM FOR GATHERING TOGETHER Hex: 4DEC | Dec: 19948
䷭HEXAGRAM FOR PUSHING UPWARD Hex: 4DED | Dec: 19949
䷮HEXAGRAM FOR OPPRESSION Hex: 4DEE | Dec: 19950
䷯HEXAGRAM FOR THE WELL Hex: 4DEF | Dec: 19951
䷰HEXAGRAM FOR REVOLUTION Hex: 4DF0 | Dec: 19952
䷱HEXAGRAM FOR THE CAULDRON Hex: 4DF1 | Dec: 19953
䷲HEXAGRAM FOR THE AROUSING THUNDER Hex: 4DF2 | Dec: 19954
䷳HEXAGRAM FOR THE KEEPING STILL MOUNTAIN Hex: 4DF3 | Dec: 19955
䷴HEXAGRAM FOR DEVELOPMENT Hex: 4DF4 | Dec: 19956
䷵HEXAGRAM FOR THE MARRYING MAIDEN Hex: 4DF5 | Dec: 19957
䷶HEXAGRAM FOR ABUNDANCE Hex: 4DF6 | Dec: 19958
䷷HEXAGRAM FOR THE WANDERER Hex: 4DF7 | Dec: 19959
䷸HEXAGRAM FOR THE GENTLE WIND Hex: 4DF8 | Dec: 19960
䷹HEXAGRAM FOR THE JOYOUS LAKE Hex: 4DF9 | Dec: 19961
䷺HEXAGRAM FOR DISPERSION Hex: 4DFA | Dec: 19962
䷻HEXAGRAM FOR LIMITATION Hex: 4DFB | Dec: 19963
䷼HEXAGRAM FOR INNER TRUTH Hex: 4DFC | Dec: 19964
䷽HEXAGRAM FOR SMALL PREPONDERANCE Hex: 4DFD | Dec: 19965
䷾HEXAGRAM FOR AFTER COMPLETION Hex: 4DFE | Dec: 19966
䷿HEXAGRAM FOR BEFORE COMPLETION Hex: 4DFF | Dec: 19967
ⲶCOPTIC CAPITAL LETTER CRYPTOGRAMMIC EIEHex: 2CB6 | Dec: 11446
ⲷCOPTIC SMALL LETTER CRYPTOGRAMMIC EIE Hex: 2CB7 | Dec: 11447
ⲼCOPTIC CAPITAL LETTER CRYPTOGRAMMIC NI Hex: 2CBC | Dec: 11452
ⲽCOPTIC SMALL LETTER CRYPTOGRAMMIC NI Hex: 2CBD | Dec: 11453
?MONOGRAM FOR EARTH HEX: 1D300 | Dec: 119552
?DIGRAM FOR HEAVENLY EARTH HEX: 1D301 | Dec: 119553
?DIGRAM FOR HUMAN EARTH HEX: 1D302 | Dec: 119554
?DIGRAM FOR EARTHLY HEAVEN HEX: 1D303 | Dec: 119555
?DIGRAM FOR EARTHLY HUMAN HEX: 1D304 | Dec: 119556
?DIGRAM FOR EARTH HEX: 1D305 | Dec: 119557
?TETRAGRAM FOR CENTRE HEX: 1D306 | Dec: 119558
?TETRAGRAM FOR FULL CIRCLE HEX: 1D307 | Dec: 119559
?TETRAGRAM FOR MIRED HEX: 1D308 | Dec: 119560
?TETRAGRAM FOR BARRIER HEX: 1D309 | Dec: 119561
?TETRAGRAM FOR KEEPING SMALL HEX: 1D30A | Dec: 119562
?TETRAGRAM FOR CONTRARIETY HEX: 1D30B | Dec: 119563
?TETRAGRAM FOR ASCENT HEX: 1D30C | Dec: 119564
?TETRAGRAM FOR OPPOSITION HEX: 1D30D | Dec: 119565
?TETRAGRAM FOR BRANCHING OUT HEX: 1D30E | Dec: 119566
?TETRAGRAM FOR DEFECTIVENESS OR DISTORTION HEX: 1D30F | Dec: 119567
?TETRAGRAM FOR DIVERGENCE HEX: 1D310 | Dec: 119568
?TETRAGRAM FOR YOUTHFULNESS HEX: 1D311 | Dec: 119569
?TETRAGRAM FOR INCREASE HEX: 1D312 | Dec: 119570
?TETRAGRAM FOR PENETRATION HEX: 1D313 | Dec: 119571
?TETRAGRAM FOR REACH HEX: 1D314 | Dec: 119572
?TETRAGRAM FOR CONTACT HEX: 1D315 | Dec: 119573
?TETRAGRAM FOR HOLDING BACK HEX: 1D316 | Dec: 119574
?TETRAGRAM FOR WAITING HEX: 1D317 | Dec: 119575
?TETRAGRAM FOR FOLLOWING HEX: 1D318 | Dec: 119576
?TETRAGRAM FOR ADVANCE HEX: 1D319 | Dec: 119577
?TETRAGRAM FOR RELEASE HEX: 1D31A | Dec: 119578
?TETRAGRAM FOR RESISTANCE HEX: 1D31B | Dec: 119579
?TETRAGRAM FOR EASE HEX: 1D31C | Dec: 119580
?TETRAGRAM FOR JOY HEX: 1D31D | Dec: 119581
?TETRAGRAM FOR CONTENTION HEX: 1D31E | Dec: 119582
?TETRAGRAM FOR ENDEAVOUR HEX: 1D31F | Dec: 119583
?TETRAGRAM FOR DUTIES HEX: 1D320 | Dec: 119584
?TETRAGRAM FOR CHANGE HEX: 1D321 | Dec: 119585
?TETRAGRAM FOR DECISIVENESS HEX: 1D322 | Dec: 119586
?TETRAGRAM FOR BOLD RESOLUTION HEX: 1D323 | Dec: 119587
?TETRAGRAM FOR PACKING HEX: 1D324 | Dec: 119588
?TETRAGRAM FOR LEGION HEX: 1D325 | Dec: 119589
?TETRAGRAM FOR CLOSENESS HEX: 1D326 | Dec: 119590
?TETRAGRAM FOR KINSHIP HEX: 1D327 | Dec: 119591
?TETRAGRAM FOR GATHERING HEX: 1D328 | Dec: 119592
?TETRAGRAM FOR STRENGTH HEX: 1D329 | Dec: 119593
?TETRAGRAM FOR PURITY HEX: 1D32A | Dec: 119594
?TETRAGRAM FOR FULLNESS HEX: 1D32B | Dec: 119595
?TETRAGRAM FOR RESIDENCE HEX: 1D32C | Dec: 119596
?TETRAGRAM FOR LAW OR MODEL HEX: 1D32D | Dec: 119597
?TETRAGRAM FOR RESPONSE HEX: 1D32E | Dec: 119598
?TETRAGRAM FOR GOING TO MEET HEX: 1D32F | Dec: 119599
?TETRAGRAM FOR ENCOUNTERS HEX: 1D330 | Dec: 119600
?TETRAGRAM FOR STOVE HEX: 1D331 | Dec: 119601
?TETRAGRAM FOR GREATNESS HEX: 1D332 | Dec: 119602
?TETRAGRAM FOR ENLARGEMENT HEX: 1D333 | Dec: 119603
?TETRAGRAM FOR PATTERN HEX: 1D334 | Dec: 119604
?TETRAGRAM FOR RITUAL HEX: 1D335 | Dec: 119605
?TETRAGRAM FOR FLIGHT HEX: 1D336 | Dec: 119606
?TETRAGRAM FOR VASTNESS OR WASTING HEX: 1D337 | Dec: 119607
?TETRAGRAM FOR CONSTANCY HEX: 1D338 | Dec: 119608
?TETRAGRAM FOR MEASURE HEX: 1D339 | Dec: 119609
?TETRAGRAM FOR ETERNITY HEX: 1D33A | Dec: 119610
?TETRAGRAM FOR UNITY HEX: 1D33B | Dec: 119611
?TETRAGRAM FOR DIMINISHMENT HEX: 1D33C | Dec: 119612
?TETRAGRAM FOR CLOSED MOUTH HEX: 1D33D | Dec: 119613
?TETRAGRAM FOR GUARDEDNESS HEX: 1D33E | Dec: 119614
?TETRAGRAM FOR GATHERING IN HEX: 1D33F | Dec: 119615
?TETRAGRAM FOR MASSING HEX: 1D340 | Dec: 119616
?TETRAGRAM FOR ACCUMULATION HEX: 1D341 | Dec: 119617
?TETRAGRAM FOR EMBELLISHMENT HEX: 1D342 | Dec: 119618
?TETRAGRAM FOR DOUBT HEX: 1D343 | Dec: 119619
?TETRAGRAM FOR WATCH HEX: 1D344 | Dec: 119620
?TETRAGRAM FOR SINKING HEX: 1D345 | Dec: 119621
?TETRAGRAM FOR INNER HEX: 1D346 | Dec: 119622
?TETRAGRAM FOR DEPARTURE HEX: 1D347 | Dec: 119623
?TETRAGRAM FOR DARKENING HEX: 1D348 | Dec: 119624
?TETRAGRAM FOR DIMMING HEX: 1D349 | Dec: 119625
?TETRAGRAM FOR EXHAUSTION HEX: 1D34A | Dec: 119626
?TETRAGRAM FOR SEVERANCE HEX: 1D34B | Dec: 119627
?TETRAGRAM FOR STOPPAGE HEX: 1D34C | Dec: 119628
?TETRAGRAM FOR HARDNESS HEX: 1D34D | Dec: 119629
?TETRAGRAM FOR COMPLETION HEX: 1D34E | Dec: 119630
?TETRAGRAM FOR CLOSURE HEX: 1D34F | Dec: 119631
?TETRAGRAM FOR FAILURE HEX: 1D350 | Dec: 119632
?TETRAGRAM FOR AGGRAVATION HEX: 1D351 | Dec: 119633
?TETRAGRAM FOR COMPLIANCE HEX: 1D352 | Dec: 119634
?TETRAGRAM FOR ON THE VERGE HEX: 1D353 | Dec: 119635
?TETRAGRAM FOR DIFFICULTIES HEX: 1D354 | Dec: 119636
?TETRAGRAM FOR LABOURING HEX: 1D355 | Dec: 119637
?TETRAGRAM FOR FOSTERING HEX: 1D356 | Dec: 119638

还要检查以下 sn-p：它将生成您的浏览器当前可以显示的所有 unicodes 字符。它可能会简化您的搜索！

var i = 0
    do document.write("<a title='(Linux|Hex): [CTRL+SHIFT]+u"+(i).toString(16)+"\nHtml entity: &# "+i+";\n&#x"+(i).toString(16)+";\n(Win|Dec): [ALT]+"+i+"' onmouseover='this.focus()' onclick='this.href=\"//google.com/?q=\"+this.innerHTML' style='cursor:pointer' target='new'>"+"&#"+i+";</a>"),i++
    while (i<136690)
window.stop()

来自What characters can be used for up/down triangle (arrow without stem) for display in HTML?

【讨论】：

【参考方案2】：

如果无法访问日文浏览器，我假设（与其他人一样）问题出在字体级别。即代码点 U+2630 没有字形。

假设您的页面也以Content-Type: text/html; charset=UTF-8 的编码正确提供，那么 HTML 编码问题应该是多余的。

我个人会使用像Font Awesome 这样的图标字体来保证在所有浏览器/平台上呈现。除了日文浏览器，您只是不知道哪些平台的字体中缺少字形。

正如其他人所指出的，字体文件可能很大，所以我会使用出色的 IcoMoon 来创建只包含我需要的字形的自定义字体。我在我的网站上使用来自各种包的 94 个图标进行此操作，字体文件约为 23k。

或者（对于本示例，最快）您可以使用标准 Unicode 字体，例如 Google 的 Noto Sans。 Google 字体还允许您只请求所需的符号，因此您也可以保持较小的尺寸。

See my example Codepen 仅从 Noto Sans 中提取一个字形。

【讨论】：

【参考方案3】：

为什么你不直接截取那个符号的屏幕？

喜欢<div> <img src="example.png"> </div> 吗？

【讨论】：

屏幕截图的可扩展性不是很好，因此图像在高分辨率屏幕上会显得颗粒感【参考方案4】：

可能是因为浏览器运行的系统中没有字体包含glyph代表“☰”U+2630 TRIGRAM FOR HEAVEN。

以下是实现此目的的其他一些选项：

your own Menu icon

.hamburger-icon 
  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;

<div>
  <label class="hamburger-icon">
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
 </label>
</div>

使用image of Menu icon

使用downloadable font 和@font-face。这将需要几兆字节来加载。

【讨论】：

【参考方案5】：

试试这个：

<div>&#8801;</div>

通过使用字符 UNICODE U+2261 (8801)、≡ 或由 IDENTICAL TO 调用，似乎可以减少设备上的字体支持问题。或者使用

<div>&equiv;</div>

根据我的经验，它大部分时间都有效。

此外，此链接可以帮助您。 http://graphemica.com/%E2%89%A1

【讨论】：

以上是关于汉堡菜单图标☰未出现在日本野生动物园中的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js：切换汉堡菜单图标

Xamarin.Forms Android 保留汉堡包/菜单图标而不是后退按钮

三行菜单？纳维康？抽屉？菜单图标？侧扫？三条纹？汉堡包？ [关闭]

css 在汉堡包图标后添加“菜单”文字

何时使用汉堡包菜单设计

我希望菜单最小化到移动屏幕后成为汉堡包图标