The icon did not appear-CodePudding

I have this code and I want to use the "menu icon" in the code, but it did not appear, and I did not know why?

And this file contains a set of instructions containing the icon and other things, and as it is clear, the icon was placed in the Navbar, but it did not appear

<html DOCTYPE="html5">
    <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>Website Using Flexbox</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
    <header>
        <nav>
            <div class="logo">
                <h1>Portfolio</h1>
            </div>
    
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Process</a></li>
                <li><a href="#">Testimony</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
    
            <box-icon name="menu" type="solid"></box-icon>
        </nav>
    </header>
    <script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>
    <script src="app.js"></script>
    </body>
    </html>

CodePudding user response：

It seems element with attribute name="menu" has not attribute type="solid". However, element with attribute name="menu" has attribute type="regular" . Removing type="solid" or swapping it to type="regular" will make it work.

<box-icon name="menu" type="regular"></box-icon>
<box-icon name="menu"></box-icon>

CodePudding user response：

put your boxicons script in <head></head> tag and it will start working here is the working demo update me if any change is required.

<html doctype="html5">
<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>Website Using Flexbox</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <h1>Portfolio</h1>
            </div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Process</a></li>
                <li><a href="#">Testimony</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <box-icon name="menu" type="solid"></box-icon>
        </nav>
    </header>
</body>
</html>