12

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
frenchie
  • 51,731
  • 109
  • 304
  • 510

5 Answers5

9

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?
NVRM
  • 11,480
  • 1
  • 88
  • 87
8

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.

Tim
  • 8,036
  • 2
  • 36
  • 52
4

Why you don't just take a screen of that symbol?

Like <div> <img src="example.png"> </div> ?

Vikasdeep Singh
  • 20,983
  • 15
  • 78
  • 104
OPTIMUS PRIME
  • 1,297
  • 9
  • 20
4

There may be reason that there is no font in the system where the browser runs contains a glyph for “☰” U+2630 TRIGRAM FOR HEAVEN.

Below are some other options to achieve this:

  1. Create your own Menu icon using pure CSS and HTML like below:

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

  1. Use an image of Menu icon

  2. Use a downloadable font with @font-face. This will take few megabytes to load.

Vikasdeep Singh
  • 20,983
  • 15
  • 78
  • 104
3

Try this:

<div>&#8801;</div>

By using the character UNICODE U+2261 (8801), ≡ or called by IDENTICAL TO, seems it will reduce font support issues on devices. Or use

<div>&equiv;</div>

According to my experience, it works most of the time.

Also, this link could help you. http://graphemica.com/%E2%89%A1

Rach Glucio
  • 80
  • 10
Ria Anggraini
  • 2,237
  • 2
  • 9
  • 26