The icon does not appear in the small interfaces even though it was added-CodePudding

I want to make a website and through this website I want its look to be compatible with all small, large and medium screens

I want to make a sidebar, but when I add an icon it doesn't appear as shown in the picture.

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="with=device-width, initial-scale=1.0">

    <title>
        University Website Design
    </title>

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>

<body>
<section class="header">
    <nav>
        <a href="index.html">
            <img src="images/TP-Link-Logo.wine.svg">
        </a>

        <div class="nav-links">
            <i class="fa fa-times"></i>
            <ul>
                <li>
                    <a href="">
                        HOME
                    </a>
                </li>
                <li>
                    <a href="">
                        ABOUT
                    </a>
                </li>
                <li>
                    <a href="">
                        COURSE
                    </a>
                </li>
                <li>
                    <a href="">
                        BLOG
                    </a>
                </li>
                <li>
                    <a href="">
                        CONTACT
                    </a>
                </li>
            </ul>

        </div>
        <i class="fa fa-bars"></i>
    </nav>

    <div class="text-box">
        <h1>
            World's Biggest University
        </h1>

        <p>
            Make Website is now one of the easiest thing in the world.
            you just need to learn HTML,CSS , <br> Javascript and you are good to go.
        </p>

        <a class="hero-btn">
            Visit Us to Know More
        </a>
    </div>

</section>
</body>
</html>

And this is the CSS code through which I design the interface with the sidebar, and I want the icon to appear only in the small interfaces.

style.css:

*{
    padding: 0;
    margin: 0;
}

.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7) , rgba(4,9,30,0.7)), 
     url("images/b.png");
    /*background-size: 100%; This line will make the background responsive*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;

    /*padding: 20em;*/
    /*background-image: url("images/b.png");*/
    /*background-repeat: no-repeat;*/
    /*background-size: 100%;*/
    /*background-position: center center;*/
    /*background-position: 0 0; This statement like center value*/
}

nav{
    display: flex;
    /*padding: 1-top bottom  2-right left*/
    padding: 1% 4%;
    justify-content: space-between;
    align-items: center;
}

nav img{
    width: 150px;
}

.nav-links{
    text-align: right;
}

.nav-links ul li{
    list-style: none;
    display: inline-block;
    position: relative;
    padding: 8px 12px;
}

.nav-links ul li a{
    text-decoration: none;
    color: white;
    font-size: 0.813rem;
    font-weight: 200;
}

.nav-links ul li::after{
    content: '';
    width: 0;
    height: 2px;
    background: #4accd5;
    display: block;
    margin: auto;
    transition: 0.3s;
}

.nav-links ul li:hover::after{
    width: 100%;
}

.text-box{
    color: #fff;
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.text-box h1{
    font-size: 3rem;
}

.text-box p{
    font-size: 1rem;
    margin-top: 0.8rem;
    margin-bottom: 1.8rem;
}

.hero-btn{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.hero-btn:hover{
    border: 1px solid #f44336;
    background: #f44336;
    transition: 1s;

}

nav .fa{
    display: none;
}

@media(max-width: 700px) {

    .text-box h1{
        font-size: 1.8rem;
    }

    .nav-links ul li{
        display: block;
    }

    .nav-links{
        position: absolute;
        background: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: 0;
        text-align: left;
        z-index: 2;
    }

    nav .fa{
        display: block;
        color: white;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }

}

CodePudding user response：

you are missing Fontawesome JS file in your project. Add in your <head> link to all.min.js from Fontawesome and your icons will be working.

You are missing the FontAwesome JavaScript file in your project. Add a link to this file in the <head> section in your HTML file. Your link should lead to the all.min.js file from FontAwesome. Doing so should make your icons work.

<head>
    <script type="text/javascript" src="all.min.js"></script> <!-- Make sure to change `all.min.js` with your actual file location -->
</head>

CodePudding user response：

I think it has to do with the link of the image itself. Is it the right format/ folder etc. Maybe try to copy the link you have in your code and apply it on your website link.

If the link is correct the image should be shown via your browser. Otherwise it's a problem with the link itself