HTML Unicode ☰ nie wykryto w menu aplikacji internetowych w mobilnym Android przeglądarce Chrome

Question

Mam problem w moim menu strony w przeglądarce mobilnej android chrom, że nie jest w stanie wykazać Unicode ☰. ale jeśli sprawdzam moją aplikację internetową w iPhone'ie lub innej przeglądarce Android, to renderuje lub działa poprawnie.

jestem przyzwyczajony tę ikonę w tej strukturze

<ul> 
    <li>&#9776;☰</li> 
    <li>Home</li> 
    <li>About Us</li> 
</ul> 

Ale to nie jest wyświetlana w przeglądarce mobilnej chrom Jak to naprawić!

Answer 1

Możemy także tworzyć ikony hamburger/menu przy użyciu niektórych CSS i HTML rzeczy, które działa dobrze we wszystkich wersjach przeglądarek bez żadnych przerw.

CSS dla ikon, takich jak:

.hamburger-icon { 
    margin: 0; 
    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; 
} 

i HTML dla:

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

Answer 2

Najwyraźniej przyczyną jest brak czcionki w systemie, w którym działa przeglądarka zawiera znak "☰" U + 2630 TRIGRAM DLA NIEBA.

alternatywy to:

• pomocą obrazu zamiast.
• Użyj czcionki do pobrania z @font-face. Może to oznaczać, że kilka megabajtów musi zostać załadowanych do systemu użytkownika.

Aby uzyskać ogólne porady w takich sprawach, zobacz mój numer Guide to using special characters in HTML.

Answer 3

Drugą alternatywą jest użycie ≡ zamiast: wygląda bardzo podobnie:

≡ zamiast ☰