HTML unicode ☰ không được phát hiện trong trình đơn ứng dụng web di động trong trình duyệt chrome android

Question

tôi có một vấn đề trong menu trang web của tôi trong android trình duyệt chrome di động đó không phải là khả năng hiển thị unicode ☰. nhưng nếu tôi kiểm tra ứng dụng web của tôi trong iPhone hoặc trình duyệt Android khác, nó sẽ hiển thị hoặc hoạt động bình thường.

Tôi đang sử dụng biểu tượng này trong cấu trúc

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

này Nhưng nó không được hiển thị trong trình duyệt chrome di động Làm thế nào để sửa chữa nó!

Answer 1

Chúng tôi cũng có thể tạo biểu tượng bánh hamburger/đơn sử dụng một số CSS và HTML thứ mà làm việc tốt trên tất cả các phiên bản của trình duyệt mà không thực hiện bất kỳ ngắt nào.

CSS cho các biểu tượng như:

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

và HTML cho:

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

Answer 2

Rõ ràng lý do là không có phông chữ nào trong hệ thống nơi trình duyệt chạy chứa glyph cho “☰” U + 2630 TRIGRAM FOR HEAVEN.

Các phương án là:

• Sử dụng hình ảnh để thay thế.
• Sử dụng phông chữ có thể tải xuống với @font-face. Điều này có thể có nghĩa là một vài megabyte cần được tải trong hệ thống của người dùng.

Để được tư vấn chung về những vấn đề như vậy, hãy xem Guide to using special characters in HTML của tôi.

Answer 3

Các thay thế khác là sử dụng ≡ thay vì: nó trông rất giống nhau:

≡ thay vì ☰