здравствуйте, не отображается unicode ☰ (символ ☰)

Question

не отображается unicode &#9776 (символ ☰), он как бы есть на странице, но его не видно. когда нажимаю нажимается, функционирует. но не отображается. помогите кому не сложно)

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <title>Mirillis</title>
</head>
<body>
        <header>
        <div class="logo">
            <a href="index.html"><img src="img/logo.png" alt="logo" class="graficlogo"></a>
            
        </div>      

        <nav>
            <div class="topnav" id="myTopnav">
                <a href="index.html">HOME</a>
                <a href="projects.html">PROJECTS</a>
                <a href="blog.html">BLOG</a>
                <a href="contact.html">CONTACT</a>
                <a href="about.html">ABOUT</a>
                <a href="services.html">SERVICES</a>
                <a href="location.html">LOCATION</a>
                <a id="menu" href="#" class="icon">&#8801;</a> <!-- вызывает иконку под телефоны -->
            </div>
        </nav>

        </header>


<script src="js/javascript.js"></script>
</body>
</html>

CSS:

a{
    text-decoration: none;
}

li{
    text-decoration: none;
    list-style: none;
}

body{
    font-family: 'Roboto', sans-serif;
}

.logo{
    background-color: #000;
    width: 100%;
    display: flex;
    justify-content: center;

}

.graficlogo{
    padding: 5px;
    max-width: 100%; /*сделали так чтобы logo была адаптивной*/
    box-sizing: border-box; /*без border-sizing: border-box; в этих случаях конечные слова сжимаются*/
}

nav{
    margin: auto;
    width: 800px;
    height: 100px;
}


.topnav{
    background: white;
    font-size: 14px;
    margin-top: 40px;
}

.topnav a{
    color: #000;
    text-align: center;
    padding: 14px 16px;
    font-size: 15px;
}

.topnav a:hover{
    border-bottom: 2px solid orange;
}

.topnav .icon{
    display: none; /*скрыли значок для адаптации*/

}

@media screen and (max-width: 768px){
    .topnav a:not(:first-child){ /*разрешаем мобильной верстки кнопку home*/
            display: none;
    }
    .topnav a.icon{
        float: right;
        margin-top: -17px
        display: block;
        color: black;
    }

    nav{
        width: 100%;
        height: 100%;

    }

    .topnav.responsive{
        position: relative;
    }

    .topnav.responsive a.icon{
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a{
        float: none;
        display: block;
        text-align: center
    }

}

JS

window.onload = function menu() {
    var menu = document.getElementById('myTopnav');
    menu.onclick = function myFunction() {
        if (menu.className === 'topnav') {
            menu.className += ' responsive';
        } else {
            menu.className = 'topnav';
        }
    }
}

БЛОГ НА HUSL

здравствуйте, не отображается unicode ☰ (символ ☰)

Ответы (0 шт):