HTML icon duplicated even though written once-CodePudding

I was trying to link a URL to an icon, but it somehow made 4 icons although I only wrote once. This is the part where caused the problem

<head>
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
  <script src="https://use.fontawesome.com/ca04587938.js"></script>
</head>
<body>
  <nav >
    <div >
      <a href="https://www.youtube.com">
        <i  />
      </a>
      <span >Youtube</span>
    </div>
    <div ></div>
  </nav>
</body>

And, this is the result

CodePudding user response：

The icon appears multiple times since you forgot to close your <i> tag.

So instead of:

<i >

write:

<i ></i>