icon not showing in html-CodePudding

I am making a website by watching this video: https://www.youtube.com/watch?v=oYRda7UtuhA&t=490s. timing: 25:10. I did as shown in the video, but the icons on the site are not displayed for me. When I add these commands, my section texts are moved to the center. and there are no icons. I looked on the Internet to solve this problem, but I did not find anything.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InkoGreat Website - Everything about programming</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2? 
family=Anek Odia:wght@100;300;500;700;800&display=swap" rel="stylesheet">
    <link rel="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome- 
[email protected]/css/fontawesome.min.css">
</head>
<body>
<section >
    <nav>
        <a href="index.html"><img src="images/profile-logo.jpg"></a>
        <div >
            <i ></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 ></i>
    </nav>
<div >
    <h1>Welcome to InkoGreat's website!</h1>
    <p>This site publishes useful programs for programming,
    new chips, tips and much more!<br>Python/HTML/CSS/JavaScript</p>
    <a href="" >Visit Us To Know More</a>
</div>

</section>

</body>
</html>

CodePudding user response：

Change your font-awesome cdn url to https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css. The link used by you seems to be invalid. Changing the link should solve your issue

CodePudding user response：

This thing has happened multiple times to me. Most of the time, when using Edge, it does not display the icons. This is probably a compatibility issue. So you are recommended to remove the line <link rel="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome- [email protected]/css/fontawesome.min.css">. As a developer, a more recommended way is to go to https://fontawesome.com/start (The latest version of FontAwesome) and create an ID. There, you will have more customisability to your icon pack and hence, make your icon pack light. You will also be provided with an option to add a js file in the HTML file which works without any problems.