Hamburger menu icon ☰ not appearing on Japanese safari

Question

I have some basic HTML that contains a hamburger menu character, something like this:

<div>☰</div>

The problem is that the character is not visible on Japanese browsers. I have <meta charset="utf-8"> in the head.

What would I need to do to make it work?

Answer 1

Maybe you can get better results using svg.

You must check if the font you are using contains that character.

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

You can also set the font family from here. Better to not rely on the client default font settings.

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

If needed: Responsive SVG text

There is some other similar alternative icons that can maybe works directly:

☰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

Check also the following snippet: It will generate all unicodes chars that your browser can currently display. It may ease your search!

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

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

Answer 2

Without access to a Japanese browser I'm assuming (as others have) that the issue is at the font level. i.e. there is no glyph for the code point U+2630.

Assuming that your page is also served correctly with the encoding as Content-Type: text/html; charset=UTF-8 the issue of HTML encoding should be redundant.

Personally I would use an icon font like Font Awesome to guarantee rendering in all browsers/platforms. Japanese browsers aside, you just don't know what platforms have missing glyphs in their fonts.

As others have pointed out, font files can be large, so I would use the excellent IcoMoon to create a custom font with only the glyphs I need. I do this on my site with 94 icons from various packages and the font files are about 23k.

Alternatively (and for this example, quickest) you could use a standard Unicode font like Google's Noto Sans. Google fonts also allow you to request only the symbols you need, so you can keep the size small there too.

See my example Codepen pulling just one glyph from Noto Sans.