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?
Thanks.
7 Answers
Answers 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"> ≡ </text> </svg>You can also set the font family from here. (Import?)
See https://developer.mozilla.org/fr/docs/Web/SVG/Element/text
There is alternative icons that can maybe works directly. (Source 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 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() Answers 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.
Answers 3
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:
- Create
your own Menu iconusing 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> </span> <span> </span> <span> </span> </label> </div>Use an
image of Menu iconUse a
downloadable fontwith@font-face. This will take few megabytes to load.
Answers 4
Try this:
<div>≡</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>≡</div>
According to my experience, it works most of the time.
Also, this link could help you. http://graphemica.com/%E2%89%A1
Answers 5
Why you don't just take a screen of that symbol?
Like <div> <img src="example.png"> </div> ?
Answers 6
Simply:
<div>☰</div>
Answers 7
You could always use bootstrap for your hamburger menu. Here is a link to the tutorial - https://mdbootstrap.com/components/bootstrap-hamburger-menu/
0 comments:
Post a Comment