title: clickable fa-heart-o fontawsome not working
body: <p>The below code create a no filled heart and it must filled by user click, but this code not working for me:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;style&gt;
  .fa {
    font-size: 50px;
    cursor: pointer;
    user-select:none ;
  }
  
  .fa:hover {
    color: darkblue;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;Click on the icon to toggle between heart &lt;/p&gt;
  
  &lt;i onclick="myFunction(this)" class="fa fa-heart-o"&gt;&lt;/i&gt;
  
  &lt;script&gt;
  function myFunction(x) {
    x.classList.toggle("fa-heart");
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But if change the </p>
  
  <pre><code>&lt;i onclick="myFunction(this)" class="fa fa-heart-o"&gt;&lt;/i&gt;
  ...
  x.classList.toggle("fa-heart");
  </code></pre>
  
  <p>to this</p>
  
  <pre><code>&lt;i onclick="myFunction(this)" class="fa fa-heart"&gt;&lt;/i&gt;
  ...
  x.classList.toggle("fa-heart-o");
  </code></pre>
  
  <p>it worked.
  I want to show first <code>fa-heart-o</code> and after user click it filled and changed to <code>fa-heart</code></p>