Не работают иконки из FontAwesome

Question

Загрузил сайт на бесплатном хостинге, файлы index,css,js и шрифты(https://ru.files.fm/u/mzu8c6cat) Когда запускаю всё на лайв сервере из Visual Code, всё работает хорошо (https://files.fm/f/ge656b66j), а когда запускаю сайт на хостинге по ссылке иконки пропадают (https://waxent.w3spaces.com) Код HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Waxent Motors</title>

    <!------------------------------FAVICON------------------------------------>
    <link rel="icon" type="image/x-icon" href="https://cdn.dribbble.com/users/8670166/screenshots/16182970/media/b9f046cc2cd1a8d93b0caf2f2c6b6c41.png">

    <!------------------------------CSS STYLE---------------------------------->
    <link rel="stylesheet" href="./css/style.css">

    <!------------------------------FontAwesomeIcons--------------------------->
    <link rel="stylesheet" href="./css/all.css">
    
</head>
<body>

    <!------------------------------Navigation---------------------------------->
    
    <nav class="nav">
        <div class="nav-menu flex-row">
            <div class="nav-brand">
                <a href="#" class="text-gray">Waxent Motors</a>
            </div>
            <div>
                <div class="toggle-collapse">
                    <div class="toggle-icons">
                        <i class="fas fa-bars"></i>
                    </div>
                </div>
            </div>
            <div>
                <ul class="nav-items">
                    <li class="nav-link">
                        <a href="#">Home</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Category</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Archive</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Pages</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="social text-gray">
                <a target="_blank" href="https://www.facebook.com/dumitru.cojucari.1/"><i class="fa-brands fa-facebook"></i></a>
                <a target="_blank" href="https://www.instagram.com/waxent_sb/"><i class="fa-brands fa-instagram"></i></a>
                <a target="_blank" href="https://twitter.com/CojucariDumitru"><i class="fa-brands fa-twitter"></i></a>
                <a target="_blank" href="https://www.youtube.com/channel/UC5HLSMtUIhWZl7gCSYfx9xg"><i class="fa-brands fa-youtube"></i></a>
            </div>
        </div>
    </nav>

    <!---------x--------------------Navigation------------------x--------------->

    <!--------------------------Main Site Section------------------------------->

    

    <!-------x------------------Main Site Section------------------------x------>

    <!--JsQuery Library file-->
    <script src="./js/Jquery.min.js"></script>

    <!--Java Script-->
    <script src="./js/main.js"></script>
</body>
</html>```

код CSS
``@import url('/css/fonts.css');




html.body{
    margin: 0%;
    box-sizing: border-box;
    overflow: hidden;
}

:root{
    /*    Theme colors         */

    --text-gray: #3f4954;
    --text-light: #686666da;
    --bg-color: #0f0f0f;
    --white: #fff;
    --midnight: #104f55;

    /*    Gradient Color       */

    --sky: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

    /*    Theme font-family    */

    --Abel: 'Abel';
    --Anton: 'Anton';
    --Josefin: 'Josefin';
    --Lexend: 'Lexend';
    --Livvic: 'Livvic';
    

}

/*----------------------global classes-----------*/

a{
    text-decoration: none; 
    color:var(--text-gray)
}

.flex-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

ul{
    list-style-type: none;
}

/*----------------------navbar-------------------*/

.nav{
    background: white;
    padding: 0 2rem;
    height: 0rem;
    min-height: 10vh;
    overflow: hidden;
    transition: height 0.5s ease-in-out;
}

.toggle-collapse{
    position: absolute;
    top: 0%;
    width: 90%;
    cursor: pointer;
    display: none;
}

.toggle-icons{
    display: flex;
    justify-content: flex-end;
    padding: 1.7rem 0;
}

.toggle-icons i{
    font-size: 1.4rem;
    color: var(--text-gray);
}

.collapse{
    height:30rem ;
}

.nav-menu{
    justify-content: space-between;
}

.nav-items{
    display: flex;
    margin: 0;
}

.nav-link{
    padding: 1.6rem 1rem;
    font-size: 1.1rem;
    position: relative;
    font-family: var(--Abel);
    font-size: 1.1rem;
}

.nav-link:hover{
    background-color: var(--midnight);

}

.nav-link a:hover{
    color: var(--white);
}

.nav-brand a{
    font-size: 1.6rem;
    padding: 1rem 0;
    display: block;
    font-family: var(--Lexend);
    font-size: 1.6rem;
}

.social{
    padding: 1.4rem 0;
}

.social i{
    padding: 0.2rem;
}

.social i:hover{
    color:#a1c4cf;
}

/*-------x--------------navbar-----------x-------*/

/*---------Viewport less than or to 750px--------*/

@media only screen and (max-width: 750px){
    .nav-menu, .nav-items{
        flex-direction: column;
    }
    .toggle-collapse{
        display: initial;
    }
}
/*--x------Viewport less than or to 750px-----x--*/

БЛОГ НА HUSL

Не работают иконки из FontAwesome

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