Question

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

<div>☰</div>

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

我需要做些什么才能让它发挥作用？

Answer 1

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

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

＆＃13;

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

＆＃13;

您也可以从此处设置字体系列。（导入？）

请参阅https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

有替代图标可以直接使用。（来源from personal script)

☰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

还请检查以下代码段：它将生成您的浏览器当前可以显示的所有unicodes字符。它可以简化您的搜索！

＆＃13;

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()

＆＃13;

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

Answer 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中拉出一个字形。

Answer 3

可能有理由在浏览器运行的系统中没有字体包含glyph的“☰”U+2630 TRIGRAM FOR HEAVEN。

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

使用纯CSS和HTML创建your own Menu icon，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

使用image of Menu icon
downloadable font与@font-face一起使用。这将需要几兆字节才能加载。

Answer 4

试试这个：

<div>≡</div>

使用字符 UNICODE U + 2261（8801），≡或 IDENTICAL TO 调用，似乎会减少设备上的字体支持问题。或者使用

<div>&equiv;</div>

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

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

Answer 5

为什么你不只是拍一个那个符号的屏幕？

赞<div> <img src="example.png"> </div>？

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

5 个答案: